/* ─────────────────────────────────────────────────────────────
 * 혜택 추가 폼 (v7.1 A2 — 슬라이드 다운 + 좌측 accent)
 *
 * 디자인 원칙
 *   - popover 헤더/SALE/기존 혜택 영역은 운영 toss.css 색감 유지
 *   - + 새 혜택 추가 버튼 + 펼친 폼만 무채색 9단계
 *   - 좌측 검정 3px border-left = "신규 액션 영역" 인지
 *   - slide-down 애니메이션 (0.22s) — 등장 명확
 *   - hidden bug fix: [hidden] 속성이 .add-form { display:flex } 에 가려지는 문제
 *
 * 토큰 (무채색만)
 *   --m-ink: #191F28   --m-body: #4E5968   --m-text2: #6B7684
 *   --m-muted: #8B95A1 --m-border: #D1D6DB --m-line: #E5E8EB
 *   --m-fill: #F2F4F6  --m-bg: #F9FAFB     --m-white: #FFFFFF
 *
 * 사용 위치: .cell-fx-pop 안 .pop-add 버튼 클릭 시 .add-form 노출
 * ───────────────────────────────────────────────────────────── */

/* ============== 토큰 ============== */
.cell-fx-pop {
  --m-ink: #191F28;
  --m-body: #4E5968;
  --m-text2: #6B7684;
  --m-muted: #8B95A1;
  --m-border: #D1D6DB;
  --m-line: #E5E8EB;
  --m-fill: #F2F4F6;
  --m-bg: #F9FAFB;
  --m-white: #FFFFFF;

  /* B2 적용범위 색 매핑 (영향도 점진) */
  --scope-option: #10B981; --scope-option-bg: #ECFDF5;
  --scope-color:  #14B8A6; --scope-color-bg:  #F0FDFA;
  --scope-bundle: #3182F6; --scope-bundle-bg: #EFF6FF;
  --scope-source: #8B5CF6; --scope-source-bg: #F5F3FF;
}

/* ============== add-zone (배경 영역) ============== */
/* 음수 margin 제거 — popover padding 안에 자연스럽게 배치 (가운데 정렬) */
.cell-fx-pop .add-zone {
  width: 100%;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--m-line);
  box-sizing: border-box;
}

/* ============== + 새 혜택 추가 trigger ============== */
.cell-fx-pop .pop-add {
  width: 100%;
  padding: 14px;                 /* 11→14 */
  border: 1px dashed var(--m-border);
  border-radius: 8px;
  background: var(--m-white);
  font-size: 17px;               /* 13→17 (×1.3) */
  font-weight: 600;
  color: var(--m-body);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  transition: border-color .12s, color .12s, background .12s;
}
.cell-fx-pop .pop-add:hover {
  border-color: var(--m-ink);
  color: var(--m-ink);
  background: var(--m-white);
}

/* ============== add-form 컨테이너 ============== */
.cell-fx-pop .add-form {
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px 14px 18px;
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-left: 3px solid var(--m-ink);  /* ★ 좌측 검정 accent */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 13px;                            /* 10→13 (×1.3) */
  box-sizing: border-box;
  animation: addform-slidedown .22s ease;
}

/* ★ hidden bug fix — .add-form { display:flex } 가 [hidden] 을 이김 */
.cell-fx-pop .add-form[hidden] {
  display: none !important;
}

@keyframes addform-slidedown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* 폼 안 타이틀 */
.cell-fx-pop .add-form .title {
  font-size: 16px;                 /* 12.5→16 (×1.3) */
  font-weight: 700;
  color: var(--m-ink);
}

/* ============== field (라벨 + 입력 그리드) ============== */
.cell-fx-pop .add-form .field {
  display: grid;
  grid-template-columns: 62px 1fr;  /* 48→62 (×1.3) — 라벨 너비도 비례 */
  gap: 10px;
  align-items: center;
}
.cell-fx-pop .add-form .field > label {
  font-size: 14px;                 /* 11→14 (×1.3) */
  font-weight: 700;
  color: var(--m-text2);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.cell-fx-pop .add-form .field input[type=text] {
  width: 100%;
  border: 1px solid var(--m-border);
  padding: 11px 14px;              /* 9/12→11/14 */
  border-radius: 7px;
  font-size: 18px;                 /* 14→18 (×1.3) */
  font-family: inherit;
  font-weight: 500;
  color: var(--m-ink);
  background: var(--m-white);
  box-sizing: border-box;
}
.cell-fx-pop .add-form .field input[type=text]:focus {
  outline: 0;
  border-color: var(--m-ink);
  box-shadow: 0 0 0 3px var(--m-fill);
}
.cell-fx-pop .add-form .field input[type=text]::placeholder {
  color: var(--m-muted);
}

/* ============== pills (정액/정률 — fill background segment) ============== */
.cell-fx-pop .add-form .pills {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--m-fill);
  border-radius: 8px;
}
.cell-fx-pop .add-form .pill {
  flex: 1;
  padding: 9px 13px;               /* 6/10→9/13 */
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: 16px;                 /* 12.5→16 (×1.3) */
  font-weight: 600;
  color: var(--m-body);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.cell-fx-pop .add-form .pill.on {
  background: var(--m-ink);
  color: var(--m-white);
}

/* ============== val + unit ============== */
.cell-fx-pop .add-form .val-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cell-fx-pop .add-form .val-row input {
  flex: 1;
}
.cell-fx-pop .add-form .val-row .unit {
  font-weight: 700;
  color: var(--m-body);
  font-size: 17px;                 /* 13→17 (×1.3) */
  min-width: 24px;
  text-align: center;
}

/* ============== scope-label (적용 범위 헤더) ============== */
.cell-fx-pop .add-form .scope-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--m-text2);
  text-transform: uppercase;
  letter-spacing: .4px;
  display: block;
  margin-bottom: 7px;
}

/* ============== b2-drop (영향도 게이지 드롭다운 — B2 시안) ============== */
.cell-fx-pop .add-form .b2-drop { position: relative; }

.cell-fx-pop .add-form .b2-drop .b2-selected {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1.5px solid var(--m-border);
  border-radius: 8px; background: var(--m-white); cursor: pointer;
  font-size: 16px; width: 100%; font-family: inherit; box-sizing: border-box;
  transition: border-color .12s;
}
.cell-fx-pop .add-form .b2-drop .b2-selected:hover { border-color: var(--m-ink); }
.cell-fx-pop .add-form .b2-drop .b2-selected .b2-lbl {
  font-weight: 700; color: var(--m-ink); flex: 1; text-align: left;
}

/* 게이지 4 막대 */
.cell-fx-pop .add-form .b2-drop .b2-gauge { display: flex; align-items: center; gap: 8px; }
.cell-fx-pop .add-form .b2-drop .b2-gauge .b2-bars { display: flex; gap: 2px; }
.cell-fx-pop .add-form .b2-drop .b2-gauge .b2-bar {
  width: 6px; height: 16px; background: var(--m-line); border-radius: 1.5px;
}
.cell-fx-pop .add-form .b2-drop .b2-gauge .b2-bar.on.b2-option { background: var(--scope-option); }
.cell-fx-pop .add-form .b2-drop .b2-gauge .b2-bar.on.b2-color  { background: var(--scope-color); }
.cell-fx-pop .add-form .b2-drop .b2-gauge .b2-bar.on.b2-bundle { background: var(--scope-bundle); }
.cell-fx-pop .add-form .b2-drop .b2-gauge .b2-bar.on.b2-source { background: var(--scope-source); }
.cell-fx-pop .add-form .b2-drop .b2-gauge .b2-cnt {
  font-size: 14px; font-weight: 700; min-width: 60px; text-align: right;
}
/* 현재 활성 scope 색이 카운트 색으로 표시 */
.cell-fx-pop .add-form .b2-drop[data-active=option] .b2-cnt { color: var(--scope-option); }
.cell-fx-pop .add-form .b2-drop[data-active=color]  .b2-cnt { color: var(--scope-color); }
.cell-fx-pop .add-form .b2-drop[data-active=bundle] .b2-cnt { color: var(--scope-bundle); }
.cell-fx-pop .add-form .b2-drop[data-active=source] .b2-cnt { color: var(--scope-source); }

.cell-fx-pop .add-form .b2-drop .b2-chev {
  color: var(--m-text2); font-size: 14px; transition: transform .2s;
  margin-left: 2px;
}
.cell-fx-pop .add-form .b2-drop.open .b2-chev { transform: rotate(180deg); }

/* 드롭 메뉴 */
.cell-fx-pop .add-form .b2-drop .b2-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--m-white); border: 1px solid var(--m-border); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); z-index: 20; padding: 6px; display: none;
}
.cell-fx-pop .add-form .b2-drop.open .b2-menu { display: block; }

.cell-fx-pop .add-form .b2-drop .b2-opt {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 11px 12px; border-radius: 6px; cursor: pointer; font-size: 15px;
  border: 0; background: transparent; width: 100%; text-align: left;
  font-family: inherit; align-items: center;
}
.cell-fx-pop .add-form .b2-drop .b2-opt:hover { background: var(--m-bg); }
.cell-fx-pop .add-form .b2-drop .b2-opt .b2-info {
  display: flex; align-items: center; gap: 10px;
}
.cell-fx-pop .add-form .b2-drop .b2-opt .b2-ico {
  width: 10px; height: 10px; border-radius: 50%;
}
.cell-fx-pop .add-form .b2-drop .b2-opt[data-scope=option] .b2-ico { background: var(--scope-option); }
.cell-fx-pop .add-form .b2-drop .b2-opt[data-scope=color]  .b2-ico { background: var(--scope-color); }
.cell-fx-pop .add-form .b2-drop .b2-opt[data-scope=bundle] .b2-ico { background: var(--scope-bundle); }
.cell-fx-pop .add-form .b2-drop .b2-opt[data-scope=source] .b2-ico { background: var(--scope-source); }
.cell-fx-pop .add-form .b2-drop .b2-opt .b2-opt-lbl {
  font-weight: 600; color: var(--m-ink);
}
.cell-fx-pop .add-form .b2-drop .b2-opt .b2-opt-cnt {
  font-size: 13px; font-weight: 700; color: var(--m-text2);
}
.cell-fx-pop .add-form .b2-drop .b2-opt.on { background: var(--m-fill); }
.cell-fx-pop .add-form .b2-drop .b2-opt.on .b2-opt-lbl { font-weight: 700; }

/* ============== impact preview (선택 요약) ============== */
.cell-fx-pop .add-form .impact-preview {
  padding: 11px 14px;
  background: var(--m-bg);
  border: 1px solid var(--m-line);
  border-radius: 6px;
  font-size: 15px;                 /* 11.5→15 (×1.3) */
  color: var(--m-text2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.cell-fx-pop .add-form .impact-preview .text b,
.cell-fx-pop .add-form .impact-preview .scope-summary {
  color: var(--m-ink);
  font-weight: 700;
}
.cell-fx-pop .add-form .impact-preview .calc {
  font-weight: 700;
  color: var(--m-ink);
  white-space: nowrap;
}

/* ============== acts (취소 / 추가 버튼) ============== */
.cell-fx-pop .add-form .acts {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--m-line);
  margin-top: 2px;
}
.cell-fx-pop .add-form .acts button {
  padding: 11px 18px;              /* 8/14→11/18 */
  border-radius: 6px;
  border: 1px solid var(--m-border);
  background: var(--m-white);
  font-size: 16px;                 /* 12.5→16 (×1.3) */
  font-weight: 600;
  font-family: inherit;
  color: var(--m-body);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cell-fx-pop .add-form .acts button:hover {
  background: var(--m-fill);
}
.cell-fx-pop .add-form .acts .save {
  background: var(--m-ink);
  color: var(--m-white);
  border-color: var(--m-ink);
}
.cell-fx-pop .add-form .acts .save:hover {
  background: #000;
}
.cell-fx-pop .add-form .acts .save[disabled] {
  background: var(--m-border);
  color: var(--m-white);
  border-color: var(--m-border);
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
 * popover 헤더 + sale + 기존 혜택 영역 폰트 ×1.3 (사용자 요청)
 *
 * 운영 toss.css 의 기본값을 그대로 두고, base.html 에서 toss_add_benefit.css 가
 * toss.css 다음에 로드되는 cascade 순서를 이용해 후순위로 override.
 * 색감은 운영 그대로 유지 — 사이즈만 130%.
 * ═══════════════════════════════════════════════════════════════ */

/* 헤더 (무신사 · SKU 계산식) — 13.5 → 18 */
.cell-fx-pop h6 { font-size: 18px; }
.cell-fx-pop h6 .close { font-size: 21px; }

/* sale (마켓 판매가 / 126,900원) — 11 → 14, 22 → 29 */
.cf-sale .lbl { font-size: 14px; }
.cf-sale .num { font-size: 29px; }
.cf-card-chip { font-size: 15px; }

/* 적용 혜택 섹션 헤더 (○ 적용 혜택 (이 옵션) / -5,179원) — 11 → 14 */
.cell-fx-ben h7 { font-size: 14px; }

/* 혜택 행 (후기 적립 / 현대카드 / test, -500원 등) — 13.5 → 18 */
.cell-fx-row { font-size: 18px; }
.cell-fx-row .nm { font-size: 18px; }
.cell-fx-row .val { font-size: 18px; }
.cell-fx-row .del { font-size: 17px; }

/* ════════════════════════════════════════════════════════════
   2026-06-05 v5 — 새 혜택 추가 = 모달 팝업 + 분류 select + 원/% 단위 토글
   ════════════════════════════════════════════════════════════ */
/* 화면 정중앙 모달 (인라인 → 팝업). 좌측 accent 제거, 큰 그림자. */
.cell-fx-pop .add-form.add-modal:not([hidden]) {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100001;
  width: 380px; max-width: 92vw;
  max-height: 88vh; overflow-y: auto;
  margin: 0;
  border: 1px solid var(--m-line);
  border-left: 1px solid var(--m-line);   /* 좌측 검정 accent 제거 */
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 18px 54px rgba(17,24,39,.30);
  animation: addmodal-pop .18s ease;
}
@keyframes addmodal-pop {
  from { opacity: 0; transform: translate(-50%, -47%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* 모달 백드롭 (화면 전체 딤) */
.cell-fx-pop .add-backdrop {
  position: fixed; inset: 0;
  background: rgba(17, 24, 39, .42);
  z-index: 100000;
}
.cell-fx-pop .add-backdrop[hidden] { display: none !important; }
.cell-fx-pop .add-form.add-modal .title {
  font-size: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--m-line);
  margin-bottom: 2px;
}

/* ── 분류 select (5 카테고리 드롭다운) ── */
.cell-fx-pop .add-form .cat-select {
  width: 100%;
  border: 1px solid var(--m-border);
  padding: 11px 38px 11px 14px;
  border-radius: 7px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  color: var(--m-ink);
  background-color: var(--m-white);
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238B95A1' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.cell-fx-pop .add-form .cat-select:focus {
  outline: 0;
  border-color: var(--m-ink);
  box-shadow: 0 0 0 3px var(--m-fill);
}

/* ── 값 옆 원/% 단위 토글 (pills 재사용, 컴팩트) ── */
.cell-fx-pop .add-form .val-row .unit-pills {
  flex: 0 0 auto;
  padding: 3px;
  gap: 3px;
}
.cell-fx-pop .add-form .val-row .unit-pills .pill {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 8px 12px;
}