/* ==========================================================================
   내 렌탈료 30초 계산 — 위저드 스타일 (calc.js 전용)
   출처: index.html 인라인 스타일의 Calculator 블록. 시각 결과가 같아야 하므로
   값은 그대로 옮기고 **셀렉터만 .bjcalc 안으로 가둔다**.

   ⚠️ 스코프 규칙
   - 이 파일의 모든 룰은 `.bjcalc` 하위다. landing.css 와 같은 이름(.pcards/.pcard/.chip
     /.num …)이 있어도 (0,2,0) 이 (0,1,0) 을 이겨 우리 값이 쓰인다.
   - 다만 landing.css `.pcard{min-height:100%;scroll-snap-align}` 처럼 우리가 다시
     선언하지 않는 속성은 그대로 새어 들어온다 → 페르소나 카드만 `.wzp*` 로 개명했다.
   - 색/반경/그림자는 landing.css 토큰과 이름이 겹치지 않도록 `--bjc-*` 로 지역 선언.
   ========================================================================== */

.bjcalc {
  --bjc-blue: #0838f8;
  --bjc-blue-700: #0628c4;
  --bjc-blue-100: #e0e8ff;
  --bjc-blue-50: #eef2ff;
  --bjc-blue-25: #f6f8ff;

  --bjc-ink: #15171f;
  --bjc-ink-2: #4c5261;
  --bjc-ink-3: #878da0;
  --bjc-ink-4: #b3b8c6;
  --bjc-line: #e6e8ee;
  --bjc-line-2: #f0f2f7;
  --bjc-paper: #fff;
  --bjc-wash: #f4f6fa;

  --bjc-hl-50: #fff7d9;
  --bjc-gold-ink: #8a6300;
  --bjc-green: #00a06b;

  --bjc-num: 'Archivo', 'Pretendard Variable', Pretendard, sans-serif;
  --bjc-r-s: 8px;
  --bjc-r-m: 12px;
  --bjc-r-xl: 26px;
  --bjc-r-pill: 999px;
  --bjc-sh-l: 0 18px 48px -12px rgba(21, 23, 31, .16);
  --bjc-sh-blue: 0 12px 32px -8px rgba(8, 56, 248, .42);
  --bjc-ease: cubic-bezier(.22, 1, .36, 1);

  /* 히어로(어두운 배경) 안에 들어가므로 카드 안쪽 기본색을 명시한다 */
  color: var(--bjc-ink);
  text-align: left;
  word-break: keep-all;
  min-width: 0;
}

.bjcalc * { box-sizing: border-box; }
.bjcalc button { border: 0; background: none; cursor: pointer; padding: 0; font: inherit; color: inherit; }
.bjcalc textarea { font: inherit; color: inherit; }
.bjcalc [hidden] { display: none !important; }
.bjcalc .num {
  font-family: var(--bjc-num); font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1; letter-spacing: -.02em;
}

/* ========================= Calculator ========================= */
.bjcalc .calc {
  background: var(--bjc-paper); border: 1.5px solid rgba(8, 56, 248, .32);
  border-radius: var(--bjc-r-xl); box-shadow: var(--bjc-sh-l), 0 0 0 0 rgba(8, 56, 248, .28); overflow: hidden;
  animation: bjcalcGlow 2.4s var(--bjc-ease) infinite;
}
.bjcalc .calc__hd { padding: 18px 20px 14px; border-bottom: 0; }
.bjcalc .calc__hd h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--bjc-ink); }
.bjcalc .calc__hd h2 em { font-style: normal; color: var(--bjc-blue); font-weight: 900; }
.bjcalc .calc__hd p { margin: 4px 0 0; font-size: 16px; color: var(--bjc-ink-3); white-space: pre-line; }
.bjcalc .calc__hd .hero-brand-marquee {
  max-width: none;
  margin: 12px -8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.bjcalc .calc__hd .hero-brand-marquee__track {
  gap: 7px;
  padding: 7px 0;
  animation-duration: 46s;
}
.bjcalc .calc__hd .hero-brand-marquee__cell {
  width: 92px;
  height: 38px;
  padding: 6px 9px;
  border-color: rgba(15,23,42,.06);
  background: rgba(255,255,255,.72);
}
.bjcalc .calc__steps { padding: 12px 20px 10px; display: grid; gap: 10px; }
.bjcalc .calc__steps:empty { display: none; }

@keyframes bjcalcGlow {
  0%, 100% {
    border-color: rgba(8, 56, 248, .28);
    box-shadow: var(--bjc-sh-l), 0 0 0 0 rgba(8, 56, 248, .26);
  }
  50% {
    border-color: rgba(8, 56, 248, .78);
    box-shadow: var(--bjc-sh-l), 0 0 0 6px rgba(8, 56, 248, .10), 0 0 26px rgba(8, 56, 248, .22);
  }
}

.hero__calc--meta.bjcalc .calc {
  border-color: rgba(255, 255, 255, .72);
  box-shadow: var(--bjc-sh-l), 0 0 0 0 rgba(255, 255, 255, .34);
  animation-name: bjcalcGlowMetaWhite;
}

@keyframes bjcalcGlowMetaWhite {
  0%, 100% {
    border-color: rgba(255, 255, 255, .58);
    box-shadow: var(--bjc-sh-l), 0 0 0 0 rgba(255, 255, 255, .32);
  }
  50% {
    border-color: rgba(255, 255, 255, .98);
    box-shadow: var(--bjc-sh-l), 0 0 0 7px rgba(255, 255, 255, .18), 0 0 30px rgba(255, 255, 255, .42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bjcalc .calc { animation: none; }
}

/* ---- 스텝 위저드 (한 화면 한 질문) ---- */
.bjcalc .wz__point {
  padding: 10px 12px;
  border: 1px solid rgba(8, 56, 248, .12);
  border-radius: var(--bjc-r-m);
  background: linear-gradient(180deg, rgba(246, 248, 255, .98), rgba(255, 255, 255, .96));
  box-shadow: 0 10px 24px -18px rgba(8, 56, 248, .36);
}
.bjcalc .wz__point.is-done {
  border-color: rgba(0, 160, 107, .22);
  background: linear-gradient(180deg, rgba(230, 247, 241, .92), rgba(255, 255, 255, .98));
}
.bjcalc .wz__point-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.bjcalc .wz__point-top span { font-size: 13px; font-weight: 900; color: var(--bjc-ink-2); }
.bjcalc .wz__point-top b { font-size: 16px; font-weight: 900; color: var(--bjc-blue); letter-spacing: 0; }
.bjcalc .wz__point.is-done .wz__point-top b { color: var(--bjc-green); }
.bjcalc .wz__bar { height: 8px; background: var(--bjc-line-2); border-radius: 999px; overflow: hidden; }
.bjcalc .wz__bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--bjc-blue), #4f7cff);
  border-radius: inherit; transition: width .35s var(--bjc-ease);
}
.bjcalc .wz__point.is-done .wz__bar span { background: linear-gradient(90deg, var(--bjc-green), #35d09a); }
.bjcalc .wz__point-copy { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--bjc-ink-3); }
.bjcalc .wz__q { display: flex; align-items: center; gap: 7px; margin-bottom: 0; line-height: 1.15; }
.bjcalc .wz__point + .wz__q { margin-top: 5px; }
.bjcalc .wz__n {
  width: 17px; height: 17px; border-radius: 50%; background: var(--bjc-blue-50); color: var(--bjc-blue);
  font-size: 13px; font-weight: 800; display: grid; place-items: center; flex: none; font-family: var(--bjc-num);
}
.bjcalc .wz__l { font-size: 16px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.bjcalc .wz__l i { color: var(--bjc-blue); font-style: normal; }
.bjcalc .wz__hint { font-size: 16px; color: var(--bjc-ink-3); margin: 0 0 11px 24px; }
.bjcalc .wz__ta {
  width: 100%; margin-top: 2px; padding: 11px 12px; border: 1.5px solid var(--bjc-line);
  border-radius: var(--bjc-r-m); font-size: 16px; line-height: 1.5; resize: vertical; background: var(--bjc-paper);
}
.bjcalc .wz__ta::placeholder { color: var(--bjc-ink-4); }
.bjcalc .wz__ta:focus { outline: 0; border-color: var(--bjc-blue); box-shadow: 0 0 0 3px rgba(8, 56, 248, .11); }
.bjcalc .wz__ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; min-height: 34px; }
.bjcalc .wz__ft--back { justify-content: flex-start; }
.bjcalc .wz__ft-r { display: flex; align-items: center; gap: 8px; }
.bjcalc .wz__skip { font-size: 16px; font-weight: 600; color: var(--bjc-ink-4); padding: 6px 4px; }
.bjcalc .wz__skip:hover { color: var(--bjc-ink-2); }
.bjcalc .wz__back { font-size: 16px; font-weight: 700; color: var(--bjc-ink-3); padding: 6px 2px; }
.bjcalc .wz__back:hover { color: var(--bjc-ink); }
.bjcalc .wz__next {
  background: var(--bjc-blue); color: #fff; font-size: 16px; font-weight: 800;
  padding: 9px 18px; border-radius: var(--bjc-r-pill); box-shadow: 0 6px 16px -5px rgba(8, 56, 248, .5);
}
.bjcalc .wz__next:hover { background: var(--bjc-blue-700); }
.bjcalc .wz__done { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bjcalc .wz__done-t { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.bjcalc .wz__redo {
  font-size: 13px; font-weight: 700; color: var(--bjc-blue); padding: 6px 10px;
  border: 1px solid var(--bjc-blue-100); border-radius: var(--bjc-r-pill);
}
.bjcalc .wz__redo:hover { background: var(--bjc-blue-25); }

/* 답변 요약 — 건너뛴 항목까지 보여준다 */
.bjcalc .wz__sum { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.bjcalc .wz__sum span {
  font-size: 13px; font-weight: 600; color: var(--bjc-ink-2); background: var(--bjc-wash);
  border: 1px solid var(--bjc-line-2); border-radius: var(--bjc-r-pill); padding: 4px 9px;
}

/* 로딩 — 결과 직전 3초 계산 연출 */
.bjcalc .load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 34px 20px; text-align: center; }
.bjcalc .load__gif {
  width: 74px; height: 74px; object-fit: contain; border-radius: 18px;
  filter: drop-shadow(0 10px 20px rgba(8, 56, 248, .18));
}
.bjcalc .load__t { font-size: 16px; font-weight: 700; color: var(--bjc-ink-2); }
.bjcalc .load__s { font-size: 13px; color: var(--bjc-ink-4); margin-top: -6px; }

.bjcalc .calc__fail { padding: 24px 20px 28px; text-align: center; font-size: 16px; line-height: 1.6; color: var(--bjc-ink-3); }

/* 결과의 카테고리 전환 — 여러 제품을 나열하지 않고 하나씩 보여준다 */
.bjcalc .out__alts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.bjcalc .out__alts-l { width: 100%; font-size: 13px; font-weight: 700; color: var(--bjc-ink-3); margin-bottom: 1px; }
.bjcalc .out__alt {
  border: 1.5px solid var(--bjc-line); background: var(--bjc-paper); border-radius: var(--bjc-r-pill);
  padding: 6px 13px; font-size: 13px; font-weight: 700; color: var(--bjc-ink-2); transition: .16s var(--bjc-ease);
}
.bjcalc .out__alt:hover { border-color: var(--bjc-blue-100); background: var(--bjc-blue-25); }
.bjcalc .out__alt.is-on { background: var(--bjc-ink); border-color: var(--bjc-ink); color: #fff; }

/* 페르소나 카드 — admin2 폼의 type:persona.
   landing.css 의 .pcard(번들 카드)와 이름이 겹쳐 새어 들어오므로 .wzp* 로 개명했다. */
.bjcalc .wzp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bjcalc .wzp__card {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 1px; text-align: left;
  border: 1.5px solid var(--bjc-line); background: var(--bjc-paper); border-radius: var(--bjc-r-m);
  padding: 8px 10px; transition: border-color .18s var(--bjc-ease), background .18s, transform .14s;
  min-width: 0;
}
.bjcalc .wzp__card:hover { border-color: var(--bjc-blue-100); background: var(--bjc-blue-25); }
.bjcalc .wzp__card:active { transform: scale(.98); }
.bjcalc .wzp__card[aria-pressed="true"] {
  border-color: var(--bjc-blue); background: var(--bjc-blue-25); box-shadow: 0 0 0 2.5px rgba(8, 56, 248, .12);
}
.bjcalc .wzp__e { grid-row: 1 / 3; font-size: 18px; line-height: 1; text-align: center; }
.bjcalc .wzp__t { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--bjc-ink); }
.bjcalc .wzp__s { font-size: 16px; color: var(--bjc-ink-3); line-height: 1.3; }

.bjcalc .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bjcalc .chip {
  border: 1.5px solid var(--bjc-line); background: var(--bjc-paper); border-radius: var(--bjc-r-pill);
  padding: 8px 14px; font-size: 16px; font-weight: 600; color: var(--bjc-ink-2);
  transition: border-color .18s var(--bjc-ease), background .18s, color .18s, transform .14s;
  max-width: 100%;
}
.bjcalc .chip:hover { border-color: var(--bjc-blue-100); background: var(--bjc-blue-25); }
.bjcalc .chip:active { transform: scale(.97); }
.bjcalc .chip[aria-pressed="true"] {
  border-color: var(--bjc-blue); background: var(--bjc-blue); color: #fff; box-shadow: 0 4px 12px -3px rgba(8, 56, 248, .5);
}

.bjcalc .calc__out {
  margin: 14px 0 0; padding: 18px 20px 20px;
  background: linear-gradient(180deg, var(--bjc-blue-25) 0%, var(--bjc-paper) 92%);
  border-top: 1px solid var(--bjc-line-2);
}
.bjcalc .out__model { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.bjcalc .out__thumb {
  width: 52px; height: 52px; border-radius: var(--bjc-r-m); background: var(--bjc-paper);
  border: 1px solid var(--bjc-line); flex: none; display: grid; place-items: center; overflow: hidden; padding: 4px;
}
.bjcalc .out__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bjcalc .out__meta { min-width: 0; }
.bjcalc .out__brand { font-size: 11px; font-weight: 700; color: var(--bjc-blue); }
.bjcalc .out__name {
  font-size: 13px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bjcalc .out__bundle {
  margin: -2px 0 14px; padding: 11px 12px; border: 1px solid var(--bjc-line-2);
  border-radius: var(--bjc-r-m); background: rgba(255,255,255,.78);
}
.bjcalc .out__bundle-h { font-size: 11px; font-weight: 800; color: var(--bjc-ink-3); margin-bottom: 7px; }
.bjcalc .out__bundle-list { display: grid; gap: 5px; }
.bjcalc .out__bundle-item { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--bjc-ink-2); }
.bjcalc .out__bundle-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bjcalc .out__bundle-item b { flex: none; color: var(--bjc-blue); font-weight: 850; }
.bjcalc .out__bundle-sum {
  display: grid; gap: 1px; overflow: hidden; margin: 9px 0 0; border-radius: 9px; background: var(--bjc-line-2);
}
.bjcalc .out__bundle-sum div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 9px; background: #fff; font-size: 11px; }
.bjcalc .out__bundle-sum dt { margin: 0; color: var(--bjc-ink-2); font-weight: 650; }
.bjcalc .out__bundle-sum dd { margin: 0; font-weight: 850; color: var(--bjc-blue); }
.bjcalc .out__bundle-sum .is-total dt,
.bjcalc .out__bundle-sum .is-total dd { font-size: 13px; font-weight: 950; }
.bjcalc .out__price { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.bjcalc .out__label { font-size: 11px; font-weight: 700; color: var(--bjc-ink-3); width: 100%; margin-bottom: -2px; }
.bjcalc .out__won {
  font-family: var(--bjc-num); font-size: clamp(38px, 10vw, 54px); font-weight: 800;
  line-height: .95; color: var(--bjc-blue); letter-spacing: -.045em;
}
.bjcalc .out__unit { font-size: 16px; font-weight: 700; color: var(--bjc-ink-2); padding-bottom: 5px; }
.bjcalc .out__strike { font-size: 13px; color: var(--bjc-ink-3); padding-bottom: 6px; }
.bjcalc .out__strike s { color: var(--bjc-ink-4); }

.bjcalc .out__rows {
  display: grid; gap: 1px; background: var(--bjc-line-2); border: 1px solid var(--bjc-line-2);
  border-radius: var(--bjc-r-m); overflow: hidden; margin-top: 14px;
}
.bjcalc .out__row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--bjc-paper); padding: 10px 13px; font-size: 13px;
}
.bjcalc .out__row dt { color: var(--bjc-ink-2); font-weight: 500; margin: 0; }
.bjcalc .out__row dd { margin: 0; font-weight: 700; letter-spacing: -.02em; }
.bjcalc .out__row dd.up { color: var(--bjc-green); }

.bjcalc .out__cta {
  width: 100%; margin-top: 14px; background: var(--bjc-blue); color: #fff; font-weight: 800; font-size: 16px;
  padding: 15px; border-radius: var(--bjc-r-m); box-shadow: var(--bjc-sh-blue);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .16s, transform .14s var(--bjc-ease);
}
.bjcalc .out__cta:hover { background: var(--bjc-blue-700); }
.bjcalc .out__cta:active { transform: translateY(1px) scale(.995); }
.bjcalc .out__direct {
  width: 100%; margin-top: 8px; background: #fff; color: var(--bjc-blue); font-weight: 850; font-size: 13px;
  padding: 13px; border: 1.5px solid var(--bjc-blue-100); border-radius: var(--bjc-r-m);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 8px 18px rgba(8,56,248,.08);
  transition: border-color .16s, background .16s, transform .14s var(--bjc-ease);
}
.bjcalc .out__direct:hover { border-color: var(--bjc-blue); background: var(--bjc-blue-25); }
.bjcalc .out__direct:active { transform: translateY(1px) scale(.995); }

.bjcalc .out__lead {
  margin-top: 14px; padding: 13px; border: 1px solid var(--bjc-blue-100);
  border-radius: var(--bjc-r-m); background: linear-gradient(180deg, #fff, var(--bjc-blue-25));
}
.bjcalc .out__lead-copy { display: grid; gap: 4px; margin-bottom: 11px; }
.bjcalc .out__lead-copy strong { font-size: 16px; font-weight: 850; color: var(--bjc-ink); letter-spacing: -.02em; }
.bjcalc .out__lead-copy span { font-size: 11px; line-height: 1.45; color: var(--bjc-ink-2); }
.bjcalc .out__lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px; }
.bjcalc .out__lead label { display: grid; gap: 5px; min-width: 0; }
.bjcalc .out__lead label span { font-size: 11px; font-weight: 750; color: var(--bjc-ink-3); }
.bjcalc .out__lead input {
  width: 100%; height: 40px; border: 1px solid var(--bjc-line);
  border-radius: 10px; background: #fff; padding: 0 10px;
  font-size: 16px; font-weight: 700; outline: none;
}
.bjcalc .out__lead input:focus { border-color: var(--bjc-blue); box-shadow: 0 0 0 3px rgba(8,56,248,.1); }
.bjcalc .out__lead-submit {
  width: 100%; height: 44px; margin-top: 10px; border-radius: var(--bjc-r-m);
  background: var(--bjc-blue); color: #fff; font-size: 16px; font-weight: 850;
  box-shadow: var(--bjc-sh-blue);
}
.bjcalc .out__lead-submit:disabled { opacity: .72; cursor: default; box-shadow: none; }
.bjcalc .out__lead-msg { min-height: 18px; margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--bjc-ink-3); }
.bjcalc .out__lead-msg[data-tone="error"] { color: #d33131; font-weight: 700; }
.bjcalc .out__lead-msg[data-tone="success"] { color: var(--bjc-green); font-weight: 800; }

.bjcalc .calc__note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--bjc-ink-4); }
.bjcalc .calc__empty { padding: 26px 20px 30px; text-align: center; color: var(--bjc-ink-3); font-size: 16px; }
.bjcalc .calc__empty--off { display: none !important; }
.bjcalc .calc__empty svg { width: 34px; height: 34px; color: var(--bjc-blue-100); margin: 0 auto 8px; }

/* 좁은 화면 — 가로 넘침 0 (룰북 #32). 320px 에서도 2열 카드가 유지되도록 여백만 줄인다. */
@media (max-width: 400px) {
  .bjcalc .calc__hd { padding: 12px 15px 8px; }
  .bjcalc .calc__hd .hero-brand-marquee { margin-top: 10px; }
  .bjcalc .calc__steps { padding: 9px 15px 10px; }
  .bjcalc .calc__out { padding: 16px 15px 18px; }
  .bjcalc .wzp { gap: 4px; margin-inline: -8px; }
  .bjcalc .wzp__card { grid-template-columns: 20px minmax(0, 1fr); column-gap: 5px; padding: 8px 7px; }
  .bjcalc .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(50% - 3px);
    padding: 7px 11px;
    font-size: 16px;
  }
  .bjcalc .calc__empty { padding: 22px 15px 26px; }
}