/* ════════════════════════════════════════════════════════════
   할인콘 발송신청 팝업 — 비즈티콘 v20 apply.css 이식본
   레이아웃·텍스트 구조 동일 · 아래 토큰 매핑으로 할인콘 디자인 적용
   ════════════════════════════════════════════════════════════ */
.apply-overlay, .bz-toast, #fmtPop {
  --navy: #0A0A0A;
  --navy-light: #1C1C1A;
  --blue: #0A0A0A;               /* 주 액션 = 할인콘 다크 */
  --blue-light: oklch(0.93 0.14 130);
  --accent: #E11D48;             /* 금액/경고 강조 (레드) */
  --accent-hover: #C11F47;
  --green: oklch(0.62 0.17 130); /* 성공/완료 = 할인콘 라임(다크) */
  --orange: #B45309;
  --white: #FFFFFF;
  --gray-50: #FAFAF7;
  --gray-100: #F1F1EC;
  --gray-200: #E5E5DF;
  --gray-300: #D9D9D2;
  --gray-400: #8A8A85;
  --gray-500: #6B6B66;
  --gray-600: #4A4A4A;
  --gray-700: #3A3A37;
  --gray-800: #1C1C1A;
  --gray-900: #0A0A0A;
  --font: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --transition: all 0.2s ease;
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.14);
}
/* ============================================================
   BIZTICON - 발송신청 레이어 팝업 스타일 (v3 — 아코디언 2섹션)
   (index.html 기존 :root 토큰 사용)
   ============================================================ */

/* ── 오버레이 ── */
.apply-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: flex-start; justify-content: center;
  background: rgba(13, 27, 62, .55);
  padding: 32px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.apply-overlay.open { display: flex; }

.apply-modal {
  width: 100%; max-width: 960px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: apPop .28s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes apPop {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── 헤더 ── */
.apply-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: var(--white);
}
.apply-head h2 { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.apply-head h2 i { font-size: 1rem; }
.apply-title-note {
  flex-basis: 100%; font-size: .76rem; font-weight: 500; opacity: .9;
  display: flex; align-items: center; gap: 5px; line-height: 1.35;
}
.apply-title-note i { font-size: .78rem; }
.apply-close {
  width: 34px; height: 34px; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .15); color: #fff; border-radius: 50%;
  font-size: 1rem; transition: var(--transition);
}
.apply-close:hover { background: rgba(255, 255, 255, .3); }

/* ── 바디 ── */
.apply-body { padding: 20px 24px; max-height: calc(100vh - 250px); overflow-y: auto; }

.apply-sec { margin-bottom: 18px; }
.apply-sec h3 {
  font-size: 1.02rem; font-weight: 700; color: var(--gray-800);
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.apply-sec-ico { color: var(--blue); }
.apply-sec .req, .apply-acc .req, .apply-pay-sec .req { color: var(--accent); font-size: .8rem; }
.apply-sec-hint { margin: 0 0 14px !important; }

/* ── 단계 번호 뱃지 ── */
.apply-step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: .88rem; font-weight: 700;
  flex: none;
}
/* 필드 진행 체크 (입력 완료 시 초록으로) */
.fld-chk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--gray-300); color: #fff; font-size: .72rem;
  flex: none; transition: background .25s;
}
.fld-chk.on { background: var(--green); }
.demo-chk { width: 16px; height: 16px; font-size: .7rem; vertical-align: middle; margin: 0 2px; }

/* 필드 라벨 행 — 체크 + 라벨 + 우측 정보(글자수/체크박스) 한 줄 */
.u-total-qty { font-weight: 600; color: var(--gray-500, #64748b); font-size: .9em; }   /* 수신자 번호 옆 (총 N개) */
.fld-label {
  display: flex; align-items: center; gap: 7px;
  font-size: .85rem; font-weight: 600; color: var(--gray-700);
  margin-bottom: 6px;
}
/* 발송신청서 작성 1·2·3 번호 배지 — 눈에 잘 띄게 */
.fld-no {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: .8rem; font-weight: 800; line-height: 1;
  box-shadow: 0 1px 4px rgba(30, 77, 183, .35);
}
.apply-unit.overview .fld-label { font-size: .92rem; font-weight: 700; color: var(--gray-800); }
/* 토스트 대상 항목 잠깐 강조 */
.wiz-flash { animation: wizFlash 1.2s ease; border-radius: var(--radius-sm); }
@keyframes wizFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 54, 61, 0); }
  25%      { box-shadow: 0 0 0 3px rgba(232, 54, 61, .45); }
}
.apply-byte-in { margin-left: auto; font-size: .76rem; font-weight: 400; color: var(--gray-400); }
.apply-check-in { margin: 0 0 0 auto !important; font-size: .8rem !important; }

/* 발송 일시: 날짜 + 시간 드롭다운 나란히 */
.sched-row { display: flex; gap: 8px; }
.sched-row .u-sched-date { flex: 1.2; cursor: pointer; }
.sched-row .u-sched-time { flex: 1; cursor: pointer; }

/* ── 발신번호 입력칸 + 쿠폰고객센터 체크 한 줄 ── */
/* 쿠폰고객센터 — 발송번호 입력칸 위 큰 박스 (.apply-field>label 규칙보다 우선) */
.apply-field .cs-box {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 13px 16px; margin-bottom: 10px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--white); transition: border-color .15s, background .15s;
}
.apply-field .cs-box:hover { border-color: var(--gray-400); }
.apply-field .cs-box:has(input:checked) { border-color: var(--blue); background: rgba(30, 77, 183, .06); }
.apply-field .cs-box input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--blue); flex: none; margin: 0; }
.cs-box-txt b { display: block; font-size: .95rem; color: var(--gray-800); }
.cs-box-txt small { display: block; font-size: .78rem; color: var(--gray-500); margin-top: 2px; }
.apply-field .cs-box:has(input:checked) .cs-box-txt b { color: var(--blue); }

/* ── 수신자 입력칸 내 오류 하이라이트 (백드롭 기법) ── */
/* 입력칸 높이 고정 — 우측 정상번호 패널과 동일 (전체보기에선 auto로 재정의) */
.hl-wrap { position: relative; flex: none; display: flex; height: 160px; }
.hl-wrap .u-paste { height: 100%; resize: none; }
.hl-back {
  position: absolute; inset: 0; z-index: 0;
  padding: 11px 13px; border: 1.5px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: .9rem; line-height: 1.6;
  color: var(--gray-800);
  white-space: pre-wrap; word-break: break-all;
  overflow: hidden; pointer-events: none;
  background: var(--white);
}
.hl-back .hl-bad { color: var(--accent); font-weight: 700; }
.hl-back .hl-dup { color: var(--gray-400); text-decoration: line-through; }
.hl-wrap .u-paste {
  position: relative; z-index: 1; width: 100%;
  background: transparent;
  color: transparent;            /* 글자는 백드롭이 그림 */
  caret-color: var(--gray-800);  /* 커서만 표시 */
  word-break: break-all;
}
.hl-wrap .u-paste::selection { background: rgba(30, 77, 183, .25); }
/* 글자색을 투명으로 둔 칸이라 placeholder 가 색을 물려받아 안 보이는 브라우저(Firefox 등)가 있다 → 명시 */
.hl-wrap .u-paste::placeholder { color: var(--gray-400); opacity: 1; line-height: 1.6; }
.hl-wrap .u-paste:disabled { background: rgba(241, 245, 249, .7); }
.bad-demo { color: var(--accent); }

/* ══════════ 위저드 (단계별 입력) ══════════ */
.wiz-copy { margin-bottom: 12px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.wiz-copy .apply-copy-check { flex: 1; min-width: 240px; }

/* 수신자: 좌 입력칸 / 우 정상 번호 리스트 */
.recv-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.recv-left { display: flex; flex-direction: column; }
.recv-right {
  display: flex; flex-direction: column;
  height: 160px;                      /* 좌측 입력칸과 동일 높이 고정 */
  border: 1.5px solid rgba(0, 166, 81, .35); border-radius: var(--radius-sm);
  background: rgba(0, 166, 81, .04); overflow: hidden;
}
.ok-head {
  padding: 10px 14px; font-size: .85rem; font-weight: 700; color: var(--green);
  background: rgba(0, 166, 81, .1); display: flex; align-items: center; gap: 7px;
}
.ok-head b { font-size: 1rem; }
.ok-list { flex: 1; overflow-y: auto; padding: 8px 12px; max-height: 260px; }
.ok-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--gray-700); padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.ok-item span {
  flex: none; min-width: 26px; text-align: right;
  font-size: .76rem; color: var(--gray-400);
}
.ok-more { font-size: .8rem; color: var(--gray-400); padding: 6px 0; }
.ok-empty { color: var(--gray-400); font-size: .82rem; text-align: center; padding: 30px 0; line-height: 1.7; }

/* 첫 상품 완료 중간 확인: 나머지 동일 옵션 — 붉은색 박스로 강조 */
.rev-all {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 16px; margin: 4px 0 6px;
  border: 1.5px solid rgba(232, 54, 61, .55); border-radius: var(--radius-sm);
  background: rgba(232, 54, 61, .07); transition: var(--transition);
}
.rev-all:has(input:checked),
.rev-all.checked { border-width: 2px; border-color: var(--accent); background: rgba(232, 54, 61, .16); }
.rev-all input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; cursor: pointer; pointer-events: none; }
.rev-all { user-select: none; }
.rev-all span b { display: block; font-size: .95rem; color: var(--accent); }
.rev-all .rev-hl { font-style: normal; color: var(--accent); font-weight: 800; }
.rev-all span small { display: block; font-size: .78rem; color: var(--gray-500); margin-top: 2px; }
.rev-all .rev-note { color: var(--gray-600); font-weight: 500; }

.wiz-chips {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(30, 77, 183, .15);
}
.wiz-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 6px 11px; border-radius: 20px; font-size: .78rem; font-weight: 600;
  background: var(--gray-100); color: var(--gray-500);
  border: 1.5px solid var(--gray-200); transition: var(--transition);
}
.wiz-chip b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--gray-400); color: #fff; font-size: .75rem;
}
.wiz-chip.done { background: rgba(0, 166, 81, .1); border-color: rgba(0, 166, 81, .4); color: var(--green); }
.wiz-chip.done b { background: var(--green); }
.wiz-chip.cur { background: var(--blue); border-color: var(--blue); color: #fff; }
.wiz-chip.cur b { background: rgba(255, 255, 255, .3); }
.wiz-chip-arrow { color: var(--gray-300); font-size: .75rem; }

.wiz-q { font-size: 1rem; font-weight: 700; color: var(--gray-800); margin-bottom: 14px; line-height: 1.5; }
.wiz-q b { color: var(--blue); }

.wiz-pane { min-height: 190px; }

/* ── 전체 보기(6단계): 모든 항목 한 화면에서 수정 (스크롤 최소화 압축) ── */
.apply-unit.overview .wiz-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
}
.apply-unit.overview .wiz-pane { min-height: 0; margin-bottom: 6px; grid-column: 1; }
.apply-unit.overview .wiz-pane[data-step="5"] { grid-column: 2; grid-row: 1 / span 4; }
.apply-unit.overview .wiz-q { display: none; }          /* 질문 문구는 숨기고 라벨만 */
.apply-unit.overview .wiz-chips { display: none; }      /* 스텝 칩 숨김 (전부 완료 상태) */
.apply-unit.overview .apply-field { margin-bottom: 8px; }
.apply-unit.overview .fld-label { margin-bottom: 4px; }
.apply-unit.overview .apply-field input,
.apply-unit.overview .apply-field select { padding: 8px 11px; font-size: .87rem; }
.apply-unit.overview .u-body { display: block; height: 74px; min-height: 0; padding: 8px 11px; font-size: .87rem; }   /* display:block — 발송번호 위 여백 통일 */
.apply-unit.overview .apply-hint:not(.apply-error):not(.apply-hint-keep) { display: none; }   /* 설명 힌트 숨김 (결제 완료 안내 등 keep 은 유지) */
/* 전체보기: 쿠폰고객센터 박스를 발송번호 입력칸 우측에 */
.apply-unit.overview .apply-field[data-fld="sender"] { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.apply-unit.overview .apply-field[data-fld="sender"] .fld-label { width: 100%; margin-bottom: 0; }
.apply-unit.overview .apply-field[data-fld="sender"] .u-sender { flex: 1; min-width: 110px; width: auto; order: 1; }
.apply-unit.overview .apply-field[data-fld="sender"] .cs-box { order: 2; margin: 0; padding: 0 12px; flex: none; }
.apply-unit.overview .apply-field .cs-box input[type="checkbox"] { width: 16px; height: 16px; }
.apply-unit.overview .cs-box-txt b { font-size: .8rem; white-space: nowrap; }
.apply-unit.overview .cs-box-txt small { display: none; }
/* 전체보기 우측(수신자): 정상번호 패널 없이 입력칸이 좌측 높이만큼 늘어나고,
   아래에 요약줄 → "나머지도 동일" 순서로 좌측 하단 라인에 맞춤 */
.apply-unit.overview .wiz-pane[data-step="5"] { display: flex; flex-direction: column; }
.apply-unit.overview .u-recv-fields { flex: 1; display: flex; flex-direction: column; }
.apply-unit.overview .apply-recv-input { margin-bottom: 6px; }
.apply-unit.overview .apply-file-btn { padding: 6px 12px; font-size: .8rem; }
.apply-unit.overview .wiz-pane[data-step="5"] .recv-grid { display: flex; flex: 1; }
.apply-unit.overview .recv-left { flex: 1; display: flex; flex-direction: column; }
.apply-unit.overview .recv-right { display: none; }     /* 정상번호 패널 숨김 (요약줄의 정상 n건으로 대체) */
.apply-unit.overview .hl-wrap { flex: 1; height: auto; min-height: 120px; }
.apply-unit.overview .u-paste { height: 100%; min-height: 120px; }
.apply-unit.overview .apply-recv-summary { margin-top: 8px; }
.apply-unit.overview .rev-all-wrap { margin-top: 8px; }
.apply-unit.overview .rev-all { margin-bottom: 0; }
.apply-unit.overview .wiz-pane:last-child { margin-bottom: 0; }
.apply-unit.overview .wiz-nav { margin-top: 6px; }   /* 하단 버튼 위 여백 축소 */
.apply-unit.overview .rev-all { margin: 0; padding: 10px 13px; }
.apply-unit.overview .rev-all input { width: 17px; height: 17px; }
.apply-unit.overview .rev-all span b { font-size: .84rem; }

/* 전체보기(확인 완료 창): 좌측=모든 입력(세로), 우측=고정 모바일 예상화면 */
@media (min-width: 861px) {
  .apply-unit.overview {
    display: grid; grid-template-columns: minmax(0, 1fr) 262px; column-gap: 18px; align-items: start;
  }
  /* 복사 옵션(첫 상품과 동일)은 미리보기 위까지 전체 폭 */
  .apply-unit.overview > .wiz-copy { grid-column: 1 / -1; grid-row: 1; }
  .apply-unit.overview > .wiz-body { grid-column: 1; grid-row: 2; }
  .apply-unit.overview > .wiz-nav  { grid-column: 1; grid-row: 3; }
  .apply-unit.overview > .u-preview-pane {
    grid-column: 2; grid-row: 2 / 4; position: sticky; top: 2px; align-self: start;
    margin: 0; padding: 0; border: 0;
  }
  .apply-unit.overview .wiz-body { grid-template-columns: 1fr; }
  .apply-unit.overview .wiz-pane[data-step="5"] { grid-column: 1; grid-row: auto; }
  .apply-unit.overview .upv-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 860px) {
  .apply-unit.overview .wiz-body { grid-template-columns: 1fr; }
  .apply-unit.overview .wiz-pane[data-step="5"] { grid-column: 1; grid-row: auto; }
}

.wiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.wiz-prev, .wiz-next {
  padding: 12px 26px; font-size: .95rem; font-weight: 700; cursor: pointer; font-family: var(--font);
  border-radius: var(--radius-sm); transition: var(--transition);
  display: inline-flex; align-items: center; gap: 8px;
}
.wiz-prev { background: var(--white); color: var(--gray-600); border: 1.5px solid var(--gray-300); }
.wiz-prev:hover:not(:disabled) { border-color: var(--gray-500); }
.wiz-prev:disabled { opacity: .4; cursor: not-allowed; }
.wiz-next { background: var(--blue); color: #fff; border: none; min-width: 150px; justify-content: center; }
.wiz-next:hover { background: var(--blue-light); }

/* ══════════ 입력 내용 요약 ══════════ */
/* 요약: 카드 2열 그리드로 한눈에 (스크롤 최소화) */
#applySummary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sum-lead {
  grid-column: 1 / -1;
  font-size: .92rem; font-weight: 700; color: var(--gray-800);
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
.sum-lead i { color: var(--green); }
.sum-card {
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 11px 14px; margin-bottom: 0; background: var(--white);
}
.sum-head {
  display: flex; align-items: flex-start; gap: 8px;
  padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 1px solid var(--gray-100);
}
/* 상품명만 남는 공간을 차지하며 최대 2줄까지 줄바꿈 */
.sum-head b {
  flex: 1 1 auto; min-width: 0; font-size: .9rem; color: var(--gray-800); line-height: 1.35;
  word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sum-qty { flex: 0 0 auto; white-space: nowrap; font-size: .8rem; color: var(--gray-500); margin-top: 2px; }
.sum-edit {
  flex: 0 0 auto; white-space: nowrap; padding: 5px 11px; font-size: .76rem; font-weight: 600; cursor: pointer;
  background: var(--white); color: var(--blue); border: 1.5px solid var(--blue); border-radius: 8px;
  font-family: var(--font); transition: var(--transition);
}
.sum-edit:hover { background: rgba(30, 77, 183, .06); }
.sum-row { display: flex; gap: 10px; padding: 3px 0; font-size: .83rem; }
.sum-row > span { flex: none; width: 62px; color: var(--gray-500); }
.sum-row > b { color: var(--gray-800); font-weight: 600; word-break: break-all; }
.sum-row small { color: var(--gray-400); font-weight: 400; }
/* 발송 내용은 2줄까지만 표시 (자세한 건 수정하기에서) */
.sum-body > b {
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 상품이 1개뿐이면 카드가 전체 폭 사용 (요약 화면은 원래 2단 그리드) */
#applySummary .sum-card:nth-child(2):last-child { grid-column: 1 / -1; }
@media (max-width: 860px) {
  #applySummary { grid-template-columns: 1fr; }
}
/* 요약 화면 배너 첨부 여부 표시(읽기전용) */
.sum-bn-thumb { height: 22px; vertical-align: middle; border: 1px solid var(--gray-200); border-radius: 4px; margin-right: 4px; }
.sum-none { color: var(--gray-400); font-weight: 400; }

/* ══════════ 편집(전체보기) 화면의 모바일 예상화면 + 배너 첨부 ══════════ */
.u-preview-pane { display: none; margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed var(--gray-200); }
.apply-unit.overview .u-preview-pane { display: block; }
.upv-head { font-size: .9rem; font-weight: 700; color: var(--gray-800); display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.upv-head i { color: var(--green); }
.upv-head small { font-weight: 400; color: var(--gray-400); font-size: .76rem; }
.upv-grid { display: grid; grid-template-columns: 1fr 272px; gap: 18px; align-items: start; }
.upv-left { min-width: 0; }
@media (max-width: 720px) {
  .upv-grid { grid-template-columns: 1fr; }
  .upv-right { max-width: 300px; margin: 4px auto 0; }
}

/* 배너 첨부 컨트롤 */
.sum-banner.copied { color: var(--gray-500); font-size: .82rem; display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--gray-50); border-radius: 8px; }
.sum-banner.copied i { color: var(--blue); }
.bn-open-lb { margin-top: 0; font-size: .88rem; }
.bn-opt { color: var(--gray-400); font-weight: 400; }
.bn-drop { margin-top: 10px; }
.bn-pick {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; cursor: pointer;
  background: var(--white); color: var(--blue); border: 1.5px dashed var(--blue); border-radius: 9px;
  font-size: .84rem; font-weight: 600; font-family: var(--font);
}
.bn-pick:hover { background: rgba(30, 77, 183, .06); }
.bn-guide { margin-top: 7px; font-size: .76rem; color: var(--gray-400); line-height: 1.5; }
.bn-guide em { color: var(--green); font-style: normal; font-weight: 600; }
.bn-has { display: flex; align-items: center; gap: 10px; }
.bn-thumb { width: 108px; height: 42px; object-fit: contain; background: #f2f5fa; border: 1px solid var(--gray-200); border-radius: 6px; flex: none; }
.bn-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bn-meta b { font-size: .8rem; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-meta small { font-size: .76rem; color: var(--gray-400); }
.bn-remove {
  flex: none; padding: 6px 11px; cursor: pointer; font-size: .76rem; font-weight: 600;
  background: var(--white); color: #c22730; border: 1.5px solid #e6b7bb; border-radius: 8px; font-family: var(--font);
}
.bn-remove:hover { background: #fdeff0; }

/* ── 모바일 예상화면 목업 ── */
.mp-phone {
  border: 8px solid #1c2740; border-radius: 26px; background: #1c2740;
  box-shadow: 0 8px 22px rgba(20, 30, 60, .22); overflow: hidden;
}
.mp-bar { height: 18px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.mp-dot { width: 4px; height: 4px; border-radius: 50%; background: #55627e; }
.mp-screen { background: #b2c7e0; padding: 10px 9px 14px; }
.mp-appbar { font-size: .76rem; color: #33415c; font-weight: 700; text-align: center; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.mp-bubble { background: #fff; border-radius: 4px 14px 14px 14px; padding: 11px 12px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.mp-title { font-size: .84rem; font-weight: 800; color: #1a1a1a; line-height: 1.35; word-break: break-all; }
.mp-banner { margin: 9px 0 0; font-size: 0; }
.mp-banner img { width: 100%; height: auto; max-height: 140px; object-fit: contain; border-radius: 0; display: block; background: #fff; }
.mp-ph { color: #b8bfcc; font-weight: 400; }

/* 쿠폰이미지(티켓 샘플) */
.mp-ticket { margin: 10px 0 0; border: 1.5px solid #f0c9cd; border-top: 3px solid #d23b45; border-radius: 0; padding: 12px 12px 10px; background: #fff; }
/* 배너가 있으면 쿠폰과 딱 붙여서(간격·상단 라운딩 없이) 하나의 블록처럼 */
.mp-banner + .mp-ticket { margin-top: 0; border-top: 1.5px solid #f0c9cd; border-top-left-radius: 0; border-top-right-radius: 0; }
.mp-tk-photo {
  height: 96px; border-radius: 0; background: #f2f5fa; border: 1px solid #e4e9f2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #a7b0c2;
}
.mp-tk-photo i { font-size: 1.5rem; }
.mp-tk-photo span { font-size: .76rem; font-weight: 600; }
.mp-tk-name { text-align: center; font-size: .86rem; font-weight: 800; color: #1a1a1a; margin-top: 9px; word-break: break-all; }
.mp-tk-line { border-top: 1px dashed #d9dfea; margin: 9px 0; }
.mp-tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: .77rem; color: #333; }
.mp-tk-grid .wide { grid-column: 1 / -1; }
.mp-tk-grid em { display: block; font-style: normal; color: #9098a8; font-size: .75rem; margin-bottom: 1px; }
.mp-tk-barcode {
  margin: 11px 0 4px; height: 40px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px, #111 4px 5px, #fff 5px 9px, #111 9px 12px, #fff 12px 14px);
}
.mp-tk-code { text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: 1px; color: #222; }
.mp-tk-code small { font-weight: 400; letter-spacing: 0; color: #a7b0c2; font-size: .75rem; }

.mp-body { margin: 11px 0 0; font-size: .78rem; color: #333; line-height: 1.6; word-break: break-all; }
.mp-info { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #eef1f6; font-size: .75rem; color: #9098a8; line-height: 1.6; }

/* 아코디언 내부 소제목 (발송 상품 / 신청자 정보) */
.apply-sub-title {
  font-size: .95rem; font-weight: 700; color: var(--gray-800);
  display: flex; align-items: center; gap: 7px;
  margin: 18px 0 10px;
}
.apply-sub-title:first-child { margin-top: 0; }

/* ══════════ 아코디언 ══════════ */
.apply-acc {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--white);
}
.apply-acc-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; cursor: pointer;
  background: var(--gray-50); border: none; text-align: left;
  font-family: var(--font); transition: var(--transition);
}
.apply-acc-head:hover { background: var(--gray-100); }
.acc-title { font-size: 1.02rem; font-weight: 700; color: var(--gray-800); flex: none; }
.acc-desc { font-size: .8rem; color: var(--gray-500); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-arrow { color: var(--gray-400); transition: transform .25s; flex: none; }

/* 열린 상태: 파란 강조 */
.apply-acc.open { border-color: var(--blue); }
.apply-acc.open .apply-acc-head { background: rgba(30, 77, 183, .07); }
.apply-acc.open .acc-title { color: var(--blue); }
.apply-acc.open .acc-arrow { transform: rotate(180deg); color: var(--blue); }
.apply-acc-body { padding: 18px; border-top: 1.5px solid var(--gray-200); }
.apply-acc.open .apply-acc-body { border-top-color: rgba(30, 77, 183, .25); }
/* ① 견적서 받기: 헤더를 숨겼으므로 본문 상단 라인 제거 */
#accQuote > .apply-acc-body { border-top: none; }

/* ── 상품 테이블 ── */
.apply-prod-wrap { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; overflow-x: auto; }
.apply-prod-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 460px; }
.apply-prod-table th, .apply-prod-table td { padding: 9px 10px; text-align: center; }
.apply-prod-table thead th { background: var(--gray-50); color: var(--gray-600); font-weight: 600; font-size: .8rem; }
.apply-prod-table tbody tr { border-top: 1px solid var(--gray-100); }
.apply-prod-table .ap-td-name { text-align: left; font-weight: 600; }
.apply-prod-table .ap-td-total { font-weight: 700; color: var(--blue); }
/* 숫자 열(할인가·합계 등)은 줄바꿈 금지 — "145,500원"이 두 줄로 접히지 않게 */
.apply-prod-table td { white-space: nowrap; }
.apply-prod-table .ap-td-name { white-space: normal; }
/* 모바일: 가로 스크롤 없이 — 행을 2줄 카드로 재배치 (1줄: 상품명 / 2줄: 할인율·할인가·유효기간·수량·합계) */
@media (max-width: 640px) {
  .apply-prod-wrap { overflow: visible; }
  .apply-prod-table { min-width: 0; font-size: .84rem; }
  .apply-prod-table thead { display: none; }
  .apply-prod-table, .apply-prod-table tbody { display: block; }
  .apply-prod-table tbody tr {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 8px;
    padding: 10px 12px;
  }
  .apply-prod-table tbody tr td { display: block; padding: 0; width: auto; } /* 데스크톱 1% 폭 트릭 해제 (특이도 ↑) */
  .apply-prod-table .ap-td-name { flex: 0 0 100%; word-break: keep-all; }
  .apply-prod-table .ap-td-total { margin-left: auto; }
  .ap-qty-input { width: 40px; }
}
.ap-qty { display: inline-flex; align-items: center; border: 1px solid var(--gray-300); border-radius: 6px; overflow: hidden; }
.ap-qty-btn { width: 26px; height: 28px; border: none; background: var(--gray-50); cursor: pointer; font-size: 1rem; color: var(--gray-700); }
.ap-qty-btn:hover { background: var(--gray-100); }
.ap-qty-input { width: 52px; height: 28px; border: none; text-align: center; font-size: .85rem;
  border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); -moz-appearance: textfield; }
.ap-qty-input::-webkit-outer-spin-button, .ap-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.apply-total-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; font-size: .95rem; }
.apply-total-row strong { font-size: 1.3rem; color: var(--accent); font-weight: 800; }

/* ── 입력 필드 공통 ── */
.apply-field { margin-bottom: 14px; }
.apply-field > label { display: block; font-size: .85rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.apply-field input[type="text"],
.apply-field input[type="email"],
.apply-field input[type="datetime-local"],
.apply-field input[type="date"],
.apply-field select,
.apply-field textarea,
.u-paste {
  width: 100%; padding: 11px 13px; font-size: .9rem; font-family: var(--font);
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  color: var(--gray-800); background: var(--white); transition: border-color .2s;
}
.apply-field input:focus, .apply-field textarea:focus, .u-paste:focus {
  outline: none; border-color: var(--blue);
}
.apply-field input:disabled, .apply-field textarea:disabled, .u-paste:disabled {
  background: var(--gray-100); color: var(--gray-400);
}
.apply-field textarea, .u-paste { resize: vertical; line-height: 1.6; }

.apply-byte { text-align: right; font-size: .78rem; color: var(--gray-400); margin-top: 4px; }

.apply-hint { font-size: .8rem; color: var(--gray-500); margin-top: 6px; display: flex; align-items: flex-start; gap: 5px; line-height: 1.5; }
.apply-hint i { margin-top: 2px; flex: none; }
.apply-hint-warn { color: var(--orange); }
.u-bday-wrap { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; font-size: .82rem; font-weight: 700; color: #b45309; background: #fff8e6; border: 1px solid #f3dca0; border-radius: 999px; padding: 2px 10px; cursor: pointer; vertical-align: middle; }
.u-bday-wrap input { accent-color: #b45309; }
.cs-box-fixed { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1.5px solid var(--gray-200); background: var(--gray-50); border-radius: var(--radius-sm); padding: 11px 13px; font-size: .95rem; color: var(--gray-800); cursor: default; }
.cs-box-fixed i { color: var(--blue); }
.cs-box-fixed small { color: var(--gray-500); font-size: .8rem; }
.cs-box-fixed .cs-fixed-m { display: none; }   /* 모바일 전용 문구 */
/* 전체보기: 고정 안내 박스는 입력칸 옆 작은 박스(flex:none)가 아니라 줄 폭에 맞춰 줄어들고 안내문이 아래로 내려가게 (모바일에서 화면 밖으로 삐져나가던 문제) */
.apply-unit.overview .apply-field[data-fld="sender"] .cs-box-fixed { flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 8px 12px; }
/* 모바일: 발송 희망 일시 라벨·생일 명단 발송 배지는 한 줄로, 시간 안내(09:00~18:00 · 30분 단위)는 다음 줄로 */
@media (max-width: 640px) {
  .apply-field[data-fld="sched"] .fld-label { flex-wrap: wrap; white-space: nowrap; }
  .apply-field[data-fld="sched"] .fld-label .apply-byte-in { flex: 0 0 100%; margin-left: 0; }
  /* 모바일: 발송번호 박스는 작은 글씨 한 문장 — "발송번호는 쿠폰고객센터(1588-5639)로 고정됩니다." (번호 강조·안내문 2줄 대신) */
  .apply-unit.overview .apply-field[data-fld="sender"] .cs-box-fixed { flex-wrap: nowrap; gap: 6px; padding: 7px 9px; font-size: .7rem; letter-spacing: -.01em; color: var(--gray-700); word-break: keep-all; }   /* 375px 폰에서도 한 줄에 들어가는 크기 (아이콘 생략) */
  .apply-unit.overview .apply-field[data-fld="sender"] .cs-box-fixed i,
  .apply-unit.overview .apply-field[data-fld="sender"] .cs-box-fixed b,
  .apply-unit.overview .apply-field[data-fld="sender"] .cs-box-fixed small { display: none; }
  .apply-unit.overview .apply-field[data-fld="sender"] .cs-box-fixed .cs-fixed-m { display: inline; }
  /* 모바일: 내용 칸 높이 확대 */
  .apply-unit.overview .u-body { height: 130px; }
}
.apply-error { color: var(--accent); font-weight: 600; }

.apply-check { display: inline-flex; align-items: center; gap: 6px; font-size: .83rem; color: var(--gray-600); margin-top: 8px; cursor: pointer; }
.apply-check input { width: 16px; height: 16px; accent-color: var(--blue); }

/* ── 신청자 정보 가로 3열 ── */
.apply-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ── 견적서 이메일 받기 버튼 ── */
.apply-later-btn {
  width: 100%; margin-top: 6px; padding: 14px;
  font-size: 1rem; font-weight: 700; cursor: pointer; font-family: var(--font);
  background: linear-gradient(135deg, #00a651 0%, #0891b2 100%);
  color: #fff; border: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 166, 81, .35);
  transition: var(--transition);
}
.apply-later-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 166, 81, .45); animation: none; }
.apply-later-btn:disabled { filter: grayscale(.4); cursor: wait; transform: none; animation: none; }

/* 은은한 초록 글로우 반짝임 */
@keyframes laterGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 166, 81, .35); }
  50%      { box-shadow: 0 0 0 5px rgba(0, 166, 81, .22), 0 0 18px rgba(0, 166, 81, .65); }
}
.apply-later-btn { animation: laterGlow 1.4s ease-in-out infinite; }

/* ── 견적 받기 · 발송신청서 작성 나란히 ── */
.apply-cta-row { display: flex; gap: 10px; margin-top: 6px; }
.apply-cta-row .apply-later-btn { margin-top: 0; flex: 1; width: auto; }
.apply-later-btn.write {
  background: linear-gradient(135deg, #e8363d 0%, #f97316 100%);
  box-shadow: 0 4px 14px rgba(232, 54, 61, .35);
  animation: writeGlow 1.4s ease-in-out infinite;
}
.apply-later-btn.write:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(232, 54, 61, .45); animation: none; }
@media (max-width: 640px) { .apply-cta-row { flex-direction: column; } }

/* 견적서 받기 하단 안내 박스 */
.quote-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 14px; padding: 14px 16px;
  background: rgba(30, 77, 183, .06);
  border: 1.5px solid rgba(30, 77, 183, .25);
  border-radius: var(--radius-sm);
  font-size: .92rem; color: var(--gray-700); line-height: 1.7;
}
.quote-note i { color: var(--blue); margin-top: 3px; flex: none; font-size: 1rem; }
.quote-note b { color: var(--blue); }
.qn-btn {
  display: inline-block; padding: 1px 9px;
  background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: 700; border-radius: 6px; vertical-align: middle;
}

/* ── 상품 탭 (한 줄 고정 — 상품명은 말줄임) ── */
.apply-tabs { display: flex; gap: 6px; flex-wrap: nowrap; margin-bottom: 0; overflow: hidden; }
.apply-tab {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  flex: 1 1 0; min-width: 0;
  padding: 9px 12px; font-size: .84rem; font-weight: 600; font-family: var(--font);
  background: rgba(232, 54, 61, .08); color: var(--gray-700);
  border: 1.5px solid rgba(232, 54, 61, .35); border-bottom: none;
  border-radius: 10px 10px 0 0; transition: var(--transition);
  white-space: nowrap;
}
.apply-tab .tab-name { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; text-align: left; }
.tab-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.tab-qty {
  flex: none; font-size: .74rem; font-weight: 800; padding: 1px 7px; border-radius: 8px;
  background: #fff; color: var(--accent); border: 1px solid rgba(232, 54, 61, .35);
}
.apply-tab.done .tab-qty, .apply-tab.active .tab-qty { background: rgba(255, 255, 255, .92); color: var(--gray-900); border-color: transparent; }
.tab-state {
  flex: none; font-size: .76rem; font-weight: 700; padding: 2px 9px; border-radius: 10px;
  background: var(--accent); color: #fff;
}
.apply-tab.done {
  background: var(--gray-900);
  border-color: var(--gray-900);
  color: #fff;
  animation: none;
}
.apply-tab.done .tab-dot { background: var(--green); }
.apply-tab.done .tab-state { background: rgba(255, 255, 255, .22); color: #fff; }
.apply-tab.active {
  position: relative; z-index: 1; font-weight: 700;
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff;
  animation: none;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, .12);
}
.apply-tab.active .tab-dot { background: #fff; }
.apply-tab.active.done .tab-dot { background: #7ef2b3; }
.apply-tab.active .tab-state { background: rgba(255, 255, 255, .25); color: #fff; }

/* ── 단위(상품별) 패널: 활성 탭과 이어지는 연한 파란톤 ── */
.apply-unit {
  border: 1.5px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  padding: 18px; margin-top: -1px;
  background: #f0f5ff;   /* 연하고 밝은 파란톤 — 활성 탭과 한 덩어리로 보이게 */
}
.apply-unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.apply-unit-col { display: flex; flex-direction: column; }
/* 수신자 입력칸은 좌측 높이에 맞춰 아래까지 늘어남 */
.u-recv-fields { flex: 1; display: flex; flex-direction: column; }
.u-recv-fields .u-paste { flex: 1; min-height: 140px; }
.apply-col-title {
  font-size: .92rem; font-weight: 700; color: var(--gray-800);
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(30, 77, 183, .18);
}
.apply-col-title i { color: var(--blue); }
.apply-copy-check {
  display: flex; margin: 0 0 10px; padding: 8px 12px;
  background: rgba(0, 166, 81, .07); border: 1px solid rgba(0, 166, 81, .25);
  border-radius: var(--radius-sm); color: var(--gray-700); font-weight: 600;
}
.apply-copy-check input { accent-color: var(--green); }
.u-info-fields.copied, .u-recv-fields.copied { opacity: .55; }

/* ── 수신자 명단 ── */
.apply-recv-input { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.apply-file-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 15px; background: var(--navy); color: #fff; font-size: .85rem; font-weight: 600;
  border-radius: var(--radius-sm); transition: background .15s;   /* 크기 전환 애니메이션 없음 */
}
.apply-file-btn:hover { background: var(--navy-light); }
.apply-fmt-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 13px; background: #fff; color: var(--navy); font-size: .82rem; font-weight: 600;
  border: 1.5px solid var(--navy); border-radius: var(--radius-sm); transition: background .15s;
}
.apply-fmt-btn:hover { background: #eef3fd; }
.apply-recv-or { font-size: .82rem; color: var(--gray-500); }

/* ── 수신자 파일 양식 안내 팝업 ── */
#fmtPop { position: fixed; inset: 0; z-index: 2600; display: none; }
#fmtPop.show { display: block; }
#fmtPop .fmt-dim { position: absolute; inset: 0; background: rgba(13,27,62,.55); }
#fmtPop .fmt-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 60px); overflow-y: auto;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(13,27,62,.35);
}
#fmtPop .fmt-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  background: var(--navy); color: #fff; font-weight: 700; font-size: .95rem;
  border-radius: 14px 14px 0 0; position: sticky; top: 0;
}
#fmtPop .fmt-close {
  margin-left: auto; border: none; background: none; color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: .85; padding: 0 2px;
}
#fmtPop .fmt-close:hover { opacity: 1; }
#fmtPop .fmt-body { padding: 16px 18px 18px; }
#fmtPop .fmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#fmtPop .fmt-col h5 { font-size: .88rem; font-weight: 700; color: #1e293b; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
#fmtPop .fmt-col svg { width: 100%; height: auto; display: block; }
#fmtPop .fmt-col p { font-size: .8rem; color: #5b6b85; line-height: 1.7; margin: 8px 0 0; }
#fmtPop .fmt-tips { margin: 14px 0 0; padding: 12px 14px 12px 30px; background: #f4f7fc; border-radius: 10px; }
#fmtPop .fmt-tips li { font-size: .8rem; color: #33415c; line-height: 1.8; }
@media (max-width: 640px) {
  #fmtPop .fmt-grid { grid-template-columns: 1fr; }
}

.apply-recv-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: .84rem; }
.apply-recv-summary span { padding: 5px 12px; border-radius: 20px; font-weight: 600; }
.apply-recv-summary .rs-ok  { background: rgba(0, 166, 81, .12);  color: var(--green); }
.apply-recv-summary .rs-err { background: rgba(232, 54, 61, .12); color: var(--accent); }
.apply-recv-summary .rs-qty { background: rgba(232, 54, 61, .12); color: var(--accent); font-weight: 700; }
.apply-recv-summary .rs-dup { background: rgba(100, 116, 139, .12); color: var(--gray-500); }

/* 오류 번호 전용 칸 */
.apply-errbox {
  margin-top: 12px; padding: 12px 14px;
  background: #fff; border: 1.5px solid rgba(232, 54, 61, .45);
  border-radius: var(--radius-sm);
}
.errbox-head { font-size: .82rem; color: var(--accent); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.recv-err-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.err-line {
  flex: none; min-width: 64px; text-align: center;
  font-size: .77rem; font-weight: 700; color: var(--accent);
  background: rgba(232, 54, 61, .1); border-radius: 6px; padding: 6px 8px;
}
.recv-err-input {
  flex: 1; padding: 8px 11px; font-size: .85rem; font-family: var(--font);
  border: 1.5px solid var(--accent); border-radius: 6px; background: rgba(232, 54, 61, .04); color: var(--gray-800);
}
.recv-err-input:focus { outline: none; border-color: var(--accent-hover); }
.recv-err-del { width: 30px; height: 30px; flex: none; border: none; cursor: pointer;
  background: var(--gray-100); color: var(--gray-500); border-radius: 6px; }
.recv-err-del:hover { background: var(--accent); color: #fff; }
.recv-err-more { font-size: .8rem; color: var(--gray-400); margin-top: 6px; }

/* ── 결제 방식 ── */
.apply-pay-sec { margin-top: 20px; }
.apply-pay-sec h4 {
  font-size: .95rem; font-weight: 700; color: var(--gray-800);
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
}
.apply-pay-opts { display: flex; gap: 12px; flex-wrap: wrap; }
.apply-radio {
  flex: 1; min-width: 140px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600; color: var(--gray-700); transition: var(--transition);
  background: var(--white);
}
.apply-radio input { width: 17px; height: 17px; accent-color: var(--blue); }
.apply-radio:has(input:checked) { border-color: var(--blue); background: rgba(30, 77, 183, .05); color: var(--blue); }

/* 결제 방식 — 카드형 선택 (기본 미선택, 크게 잘 보이게) */
.apply-pay-hint {
  display: flex; align-items: center; gap: 7px; margin: 0 0 12px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: #fff4f4; border: 1px solid #f3c2c5; color: #c22730;
  font-size: .85rem; font-weight: 600;
}
.apply-pay-hint i { font-size: 1rem; }
.apply-pay-card {
  flex: 1; min-width: 150px; position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 14px; border: 2px solid var(--gray-200); border-radius: var(--radius);
  background: var(--white); transition: var(--transition); text-align: center;
}
.apply-pay-card input { position: absolute; opacity: 0; pointer-events: none; }
.apply-pay-card > i { font-size: 1.6rem; color: var(--gray-400); transition: var(--transition); }
.apply-pay-card .pay-name { font-size: 1rem; font-weight: 700; color: var(--gray-800); }
.apply-pay-card .pay-desc { font-size: .78rem; color: var(--gray-500); }
.apply-pay-card:hover { border-color: var(--blue); }
.apply-pay-card:has(input:checked) { border-color: var(--blue); background: rgba(30, 77, 183, .06); box-shadow: 0 0 0 3px rgba(30, 77, 183, .12); }
.apply-pay-card:has(input:checked) > i,
.apply-pay-card:has(input:checked) .pay-name { color: var(--blue); }
.apply-pay-card:has(input:checked)::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; top: 8px; right: 10px; color: var(--blue); font-size: .8rem;
}
/* 미선택 상태 강조(빨간 테두리 깜빡) */
.apply-pay-opts.need-pick .apply-pay-card { border-color: #e8363d; animation: payBlink 1s ease-in-out infinite; }
@keyframes payBlink { 0%,100% { border-color: #e8363d; } 50% { border-color: #f3c2c5; } }

.apply-bank-box {
  margin-top: 12px; padding: 13px 18px;
  background: rgba(30, 77, 183, .05); border: 1px solid rgba(30, 77, 183, .2);
  border-radius: var(--radius-sm);
}
.apply-bank-box .pg-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: .9rem; color: var(--gray-600); }
.apply-bank-box .pg-row b { color: var(--gray-800); font-weight: 700; }

/* 카드결제 할인율 차감 안내 — 결제 방식에 따라 금액이 달라지므로 눈에 띄게 */
.apply-card-warn {
  display: flex; gap: 10px; align-items: flex-start;
  margin: -3px 0 10px; padding: 11px 13px;
  background: #fff6ed; border: 1px solid #f2c99a; border-radius: var(--radius-sm);
}
.apply-card-warn > i { color: #d97706; font-size: 1rem; margin-top: 1px; flex: none; }
.apply-card-warn b { display: block; color: #9a3412; font-size: .92rem; font-weight: 800; margin-bottom: 3px; }
.apply-card-warn span { display: block; color: #7c4a21; font-size: .82rem; line-height: 1.6; word-break: keep-all; }
/* 상품별 변경 내역(현재 할인율·단가 → 카드결제 할인율·단가) */
.apply-card-diff { margin: 6px 0 6px; display: grid; gap: 4px; }
.apply-card-diff .cd-row { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: .8rem; color: #7c4a21; line-height: 1.5; }
.apply-card-diff .cd-name { font-weight: 700; color: #9a3412; min-width: 0; word-break: keep-all; }
.apply-card-diff .cd-chg { white-space: nowrap; font-family: 'JetBrains Mono', monospace; }
.apply-card-diff .cd-chg b { display: inline; color: #b42323; font-weight: 800; margin: 0; font-size: inherit; }   /* .apply-card-warn b(display:block) 덮어씀 */
.apply-card-diff .cd-chg i { font-style: normal; color: #b08968; margin: 0 3px; }

/* ── 푸터 ── */
.apply-foot { padding: 14px 24px 16px; border-top: 1px solid var(--gray-200); background: var(--gray-50); }
.apply-foot-msg { font-size: .82rem; color: var(--accent); font-weight: 600; margin-bottom: 10px; min-height: 1.2em; }
.apply-foot-msg.ok { color: var(--blue); }   /* 문제 없음 = 파란 안내 */
.apply-foot-btns { display: flex; gap: 10px; }
.apply-doc-btn {
  flex: 1; padding: 13px 10px; font-size: .88rem; font-weight: 600; cursor: pointer; font-family: var(--font);
  background: var(--white); color: var(--gray-700);
  border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: var(--transition);
}
.apply-doc-btn:hover { border-color: var(--blue); color: var(--blue); }
.apply-submit-btn {
  flex: 1.4; padding: 13px; font-size: .98rem; font-weight: 700; cursor: pointer; font-family: var(--font);
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition);
}
.apply-submit-btn:hover:not(:disabled) { background: var(--accent-hover); }
.apply-submit-btn:disabled { background: var(--gray-300); cursor: not-allowed; }
/* 결제방식 아래 상시 표시되는 메인 제출 버튼 (푸터 제거 후 본문에 배치) */
.apply-submit-main { width: 100%; margin-top: 20px; padding: 15px; font-size: 1.02rem; }

/* 하단 [발송신청서 작성] — 은은하게 반짝여 시선 유도 */
@keyframes writeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 54, 61, .0); }
  50%      { box-shadow: 0 0 0 5px rgba(232, 54, 61, .22), 0 0 16px rgba(232, 54, 61, .55); }
}
.apply-write-btn { animation: writeGlow 1.4s ease-in-out infinite; }
.apply-write-btn:hover { animation: none; }

/* ── 완료(안내) 화면 ── */
.apply-done-body { text-align: left; }
.apply-done-lead { font-size: .95rem; color: var(--gray-700); line-height: 1.7; margin-bottom: 18px; text-align: center; }
/* 접수 완료 감사 문구 — 크고 잘 보이게 */
.dn-thanks { font-size: 1.35rem; font-weight: 800; color: var(--gray-900, #1a2233); line-height: 1.5; margin: 6px 0 8px; }
/* 접수 완료 — 감사 문구 아래 안내 서브문구 */
.dn-sub { text-align: center; font-size: .92rem; color: var(--gray-600); line-height: 1.6; margin: 0 0 20px; }
.apply-done-box { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 16px; }
.dn-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: .9rem; color: var(--gray-600); gap: 12px; }
.dn-row b { color: var(--gray-800); font-weight: 700; text-align: right; }
.dn-total { border-top: 1px solid var(--gray-200); margin-top: 4px; padding-top: 12px; }
.dn-total b { color: var(--accent); font-size: 1.15rem; }

/* ── 접수 완료: 2단 컴팩트 레이아웃 (스크롤 최소화) ── */
.apply-done-body { padding: 16px 20px !important; }
.dn-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  font-size: .95rem; font-weight: 700; color: var(--gray-800);
  padding: 11px 14px; margin-bottom: 12px;
  background: rgba(0, 166, 81, .07); border: 1px solid rgba(0, 166, 81, .28);
  border-radius: var(--radius-sm);
}
.dn-head > i { color: var(--green); }
.dn-no { margin-left: auto; font-weight: 600; font-size: .84rem; color: var(--gray-600); }
.dn-no b { color: var(--accent); font-size: 1rem; margin-left: 4px; }

.dn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.dn-col { display: flex; flex-direction: column; gap: 10px; }

/* 컴팩트 치수 재정의 */
.dn-grid .apply-done-box { margin: 0; padding: 10px 14px; }
.dn-grid .dn-row { padding: 4px 0; font-size: .84rem; }
.dn-grid .dn-total { margin-top: 2px; padding-top: 8px; }
.dn-grid .dn-total b { font-size: 1.05rem; }
.dn-grid .apply-pay-guide { padding: 11px 14px; }
.dn-grid .pg-title { margin-bottom: 7px; font-size: .89rem; }
.dn-grid .pg-row { padding: 3px 0; font-size: .84rem; }
.dn-grid .pg-note { font-size: .79rem; line-height: 1.55; margin-top: 5px; }
.dn-grid .apply-mail-guide { margin: 0; padding: 11px 14px; }
.dn-grid .mg-to { font-size: .82rem; line-height: 1.55; }
.dn-grid .mg-files { margin-top: 8px; gap: 5px 6px; }
.dn-grid .mg-files li { font-size: .78rem; padding: 4px 9px; }
.dn-grid .apply-view-btn { width: 100%; justify-content: center; padding: 11px 18px; font-size: .9rem; }
.dn-grid .apply-done-cs { margin-top: 0; font-size: .79rem; line-height: 1.6; }

@media (max-width: 860px) {
  .dn-grid { grid-template-columns: 1fr; }
  .dn-no { margin-left: 0; }
}

.apply-pay-guide { border-radius: var(--radius-sm); padding: 16px 18px; }
.apply-pay-guide.bank { background: rgba(30, 77, 183, .05); border: 1px solid rgba(30, 77, 183, .2); }
.apply-pay-guide.card { background: rgba(249, 115, 22, .06); border: 1px solid rgba(249, 115, 22, .25); }
.pg-title { font-weight: 700; color: var(--gray-800); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.pg-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: .9rem; color: var(--gray-600); }
.pg-row b { color: var(--gray-800); font-weight: 700; }
.pg-amt { color: var(--accent) !important; font-size: 1.05rem; }
.pg-note { font-size: .86rem; color: var(--gray-600); line-height: 1.7; margin-top: 6px; }

/* 접수 완료 화면: 메일 발송 안내 (내역서·사업자등록증·통장사본 첨부) */
.apply-mail-guide {
  margin-top: 14px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: rgba(0, 166, 81, .06); border: 1px solid rgba(0, 166, 81, .28);
}
.apply-mail-guide .pg-title { color: var(--green); margin-bottom: 8px; }
.apply-mail-guide .mg-to { font-size: .88rem; color: var(--gray-700); line-height: 1.7; }
.apply-mail-guide .mg-to b { color: var(--gray-800); }
.apply-mail-guide .mg-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.apply-mail-guide .mg-files li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 600; color: var(--gray-700);
  background: var(--white); border: 1px solid rgba(0, 166, 81, .3);
  padding: 5px 11px; border-radius: 20px;
}
.apply-mail-guide .mg-files i { color: var(--accent); }
.apply-mail-guide .mg-files em { font-style: normal; font-weight: 500; color: var(--gray-400); font-size: .92em; }
.apply-done-cs { text-align: center; font-size: .85rem; color: var(--gray-500); margin-top: 16px; }
.apply-view-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px; background: var(--blue); color: #fff !important;
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
  transition: var(--transition);
}
.apply-view-btn:hover { background: var(--blue-light); }
.apply-done-ok {
  background: var(--blue);
  width: 340px; max-width: 100%;
  margin: 0 auto;
  padding: 16px !important;
  font-size: 1.1rem !important;
}
.apply-done-ok:hover { background: var(--blue-light); }

/* ── 반응형 ── */
@media (max-width: 860px) {
  .apply-unit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .apply-overlay { padding: 0; }
  .apply-modal { max-width: 100%; min-height: 100vh; border-radius: 0; }
  .apply-body { max-height: none; padding: 16px; }
  .apply-head { padding: 16px; }
  .apply-grid3 { grid-template-columns: 1fr; }
  .apply-pay-opts { flex-direction: column; }
  .apply-total-row strong { font-size: 1.15rem; }
  .apply-foot-btns { flex-direction: column; }
  .apply-tab { max-width: 100%; }
  .acc-desc { display: none; }
}


/* ════════════════════════════════════════════════════════════
   할인콘 스킨 오버라이드 — 배치는 그대로, 색·버튼만 할인콘 시각 언어
   (다크 아웃라인 + 오프셋 그림자 + 라임 액센트)
   ════════════════════════════════════════════════════════════ */
.apply-modal {
  border: 1.5px solid #0A0A0A;
  border-radius: 14px;
  box-shadow: 8px 12px 0 #0A0A0A;
}
.apply-head { background: #0A0A0A; }
.apply-head h2 i { color: oklch(0.87 0.19 130); }

/* [견적서 이메일 받기] — 다크 배경 + 라임 텍스트 (할인콘 primary) */
.apply-later-btn,
.apply-later-btn:hover {
  background: #0A0A0A;
  color: oklch(0.87 0.19 130);
  border: 1.5px solid #0A0A0A;
  border-radius: 10px;
  box-shadow: 4px 4px 0 oklch(0.72 0.19 130);
  animation: none;
  filter: none;
}
.apply-later-btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 oklch(0.72 0.19 130); }

/* [지금 발송 하기] — 라임 액센트 + 다크 아웃라인 + 오프셋 그림자 */
.apply-later-btn.write,
.apply-later-btn.write:hover {
  background: oklch(0.87 0.19 130);
  color: #0A0A0A;
  border-color: #0A0A0A;
  box-shadow: 4px 4px 0 #0A0A0A;
  animation: none;
  filter: none;
}
.apply-later-btn.write:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 #0A0A0A; }

/* 안내 박스 — 대시 아웃라인 (할인콘 노트 스타일) */
.quote-note {
  background: #F1F1EC;
  border: 1.5px dashed #0A0A0A;
}
.quote-note i { color: #0A0A0A; }
.quote-note .qn-btn {
  background: oklch(0.87 0.19 130);
  color: #0A0A0A;
}

/* 총 합계 — 라임 하이라이트 */
.apply-total-row strong {
  color: #0A0A0A;
  background: oklch(0.87 0.19 130);
  padding: 0 8px;
  border-radius: 6px;
}

/* [발송 신청 보내기] — 할인콘 primary */
.apply-submit-btn {
  background: #0A0A0A;
  color: oklch(0.87 0.19 130);
  box-shadow: 4px 4px 0 oklch(0.72 0.19 130);
  border-radius: 10px;
}
.apply-submit-btn:hover:not(:disabled) {
  background: oklch(0.72 0.19 130);
  color: #0A0A0A;
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #0A0A0A;
}


/* ── 토스트 알림 (비즈티콘 v20 동일 배치 · 할인콘 스킨) ── */
.bz-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #0A0A0A;
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  border: 1.5px solid #0A0A0A;
  font-size: .9rem;
  font-weight: 600;
  font-family: var(--font);
  white-space: nowrap;
  box-shadow: 4px 4px 0 oklch(0.72 0.19 130);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  z-index: 9999;
  pointer-events: none;
}
.bz-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.bz-toast.toast-success { background: oklch(0.87 0.19 130); color: #0A0A0A; box-shadow: 4px 4px 0 #0A0A0A; }
.bz-toast.toast-error   { background: #E11D48; border-color: #E11D48; box-shadow: 4px 4px 0 #0A0A0A; }
.bz-toast.toast-info    { background: #0A0A0A; color: #fff; box-shadow: 4px 4px 0 oklch(0.72 0.19 130); }
.bz-toast i { margin-right: 6px; }


/* ── 견적서 받기 화면 재배치 (할인콘)
   상단: 발송 상품 문서 카드(전체 폭) / 하단: 좌 신청자 정보 · 우 CTA 스택 ── */
.hc-quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "doc  doc"
    "form cta";
  gap: 20px 24px;
  align-items: start;
}
/* 발송 상품 — 우측 견적서 페인과 같은 문서 카드 언어 (라임 세로 라인 + 오프셋 그림자) */
.hc-quote-left {
  grid-area: doc;
  min-width: 0; /* grid 아이템이 테이블 min-width에 밀려 카드 밖으로 넘치지 않게 — 내부 가로 스크롤 */
  background: #FFFFFF;
  border: 1.5px solid #0A0A0A;
  border-radius: 12px;
  padding: 20px 22px 16px 26px;
  box-shadow: 5px 5px 0 #0A0A0A;
  background-image: linear-gradient(90deg, oklch(0.87 0.19 130) 0 4px, transparent 4px);
}
.hc-quote-left .apply-sub-title { margin-top: 0; }
.hc-quote-left .apply-total-row { margin-bottom: 0; }
/* 좌측 아래 — 신청자 정보 (컴팩트: 라벨 좌 · 입력 우, 우측 CTA 스택과 높이 균형) */
.hc-quote-form { grid-area: form; min-width: 0; }
.hc-quote-form .apply-sub-title { margin-top: 0; }
.hc-quote-form .apply-grid3 { grid-template-columns: 1fr; gap: 10px; }
.hc-quote-form .apply-field {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 10px;
}
.hc-quote-form .apply-field label { margin-bottom: 0; }
.hc-quote-form .apply-field input { padding-top: 10px; padding-bottom: 10px; }
/* 신청자 정보 아래 — 약관 동의 체크 */
.apply-agree {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px;
  font-size: .85rem; color: var(--gray-700);
  cursor: pointer; line-height: 1.5;
  word-break: keep-all;
}
.apply-agree input {
  width: 16px; height: 16px; flex: none;
  margin-top: 2px;
  accent-color: #0A0A0A;
  cursor: pointer;
}
.apply-agree a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.apply-agree .req { color: var(--accent); }

/* 우측 아래 — CTA 스택 */
.hc-quote-cta { grid-area: cta; align-self: end; min-width: 0; }
.hc-quote-cta .apply-later-btn { margin-top: 0; }
.hc-quote-cta .quote-note { margin: 14px 0; }
/* 모바일·좁은 화면: 문서 → 신청자 정보 → CTA 세로 스택 */
@media (max-width: 900px) {
  .hc-quote-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "doc" "form" "cta";
    gap: 20px;
  }
}


/* ── 발송 상품 테이블: 상품명 열 최대 확보 ──
   숫자 열들은 내용 폭(1% + nowrap)만 차지, 남는 폭은 전부 상품명이 사용 */
.apply-prod-table th,
.apply-prod-table td { width: 1%; }
.apply-prod-table th:first-child,
.apply-prod-table .ap-td-name { width: auto; }
.apply-prod-table thead th { white-space: nowrap; }

/* [견적서 이메일 받기] 글자 +2px (16 → 18px) */
#apLaterBtn { font-size: 1.125rem; }
/* ── 예치금 모드 (선결제 잔여 2단계): 상품 검색·최근 상품·잔액 표시 ── */
.ap-dep-bal { color: var(--accent, #e8363d); font-weight: 800; margin-left: 4px; }
.ap-dep-search { position: relative; margin: 6px 0 8px; }
.ap-dep-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }
.ap-dep-search input { width: 100%; padding: 12px 14px 12px 38px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-sm); font-size: .95rem; font-family: var(--font); }
.ap-dep-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,77,183,.12); }
.ap-dep-results { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 4px 0; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0,0,0,.12); max-height: 260px; overflow: auto; }
.ap-dep-results.open { display: block; }
.ap-dep-results li { display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; font-size: .9rem; }
.ap-dep-results li:hover { background: var(--gray-50); }
.ap-dep-results li > i { color: var(--gray-400); }
.ap-dep-results li > span { flex: 1; min-width: 0; }
.ap-dep-results li > b { color: var(--blue); white-space: nowrap; }
.ap-dep-results li > em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--accent, #e8363d); background: #fde8e9; padding: 1px 6px; border-radius: 6px; }
.ap-dep-results li.dep-empty { color: var(--gray-500); cursor: default; }
.ap-dep-recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.dep-rc-label { font-size: .82rem; color: var(--gray-600); font-weight: 700; margin-right: 2px; }
.dep-chip { border: 1px solid var(--gray-300); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-family: var(--font); cursor: pointer; color: var(--gray-700); transition: var(--transition); }
.dep-chip:hover { border-color: var(--blue); color: var(--blue); background: #eef3fd; }
.dep-chip small { color: var(--gray-500); }
.ap-dep-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; padding: 10px 14px; border-radius: var(--radius-sm); background: #eef3fd; border: 1px solid #c7d7f5; font-size: .88rem; color: var(--gray-700); }
.ap-dep-bar .dep-k b { color: var(--navy, #0d1b3e); }
.ap-dep-bar .dep-k.ok b { color: #00a651; }
.ap-dep-bar .dep-k.short { color: #b45309; }
.ap-dep-bar .dep-k.short b { color: #b45309; }
.ap-del { border: none; background: #fde8e9; color: var(--accent, #e8363d); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; }
.ap-del:hover { background: var(--accent, #e8363d); color: #fff; }