/* =========================================================
   BJCalc + BJDoc Bundle CSS
   - Calculator: #bjcalc scoped
   - Doc blocks: .bjdoc-block scoped (independent Elementor blocks)
   Version: 1.4.2
   ========================================================= */

/* -------------------------
   BJCalc (Calculator)
   ------------------------- */

#bjcalc{
  --bj-accent:#2563eb;
  --bj-accent-600:#1d4ed8;

  /* Canvas background (outermost)
     - Light: subtle neutral canvas
     - Dark : deep navy gradient canvas
  */
  --bj-page-bg: linear-gradient(180deg, #f7f8fb 0%, #ffffff 70%);

  --bj-bg:#ffffff;
  --bj-surface:#fff;
  --bj-surface-2:rgba(15,23,42,0.035);

  --bj-text:#0b1220;
  --bj-muted:rgba(15,23,42,0.62);

  --bj-border:rgba(15,23,42,0.10);

  --bj-warm:#fff7e6;
  --bj-warm-border:rgba(242,214,163,0.95);

  --bj-radius-lg:26px;
  --bj-radius:22px;
  --bj-radius-sm:14px;

  --bj-shadow:0 10px 30px rgba(15,23,42,0.08);
  --bj-shadow-sm:0 8px 22px rgba(15,23,42,0.07);

  --bj-ring:0 0 0 5px rgba(37,99,235,0.18);

  /* Width control (overridable via inline --bj-app-max) */
  --bj-app-max: 1180px;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  color: var(--bj-text);
  width: 100%;
  max-width: min(var(--bj-app-max), 100%);
  margin: 0 auto;
  padding: 0;
}

/* ---------------------------------------------------------
   Outermost canvas wrapper
   - Ensures the app looks correct even when the WP page
     background is white.
   --------------------------------------------------------- */

#bjcalc{
  background: var(--bj-page-bg);
  border-radius: calc(var(--bj-radius-lg) + 6px);
  padding: 18px;
  box-shadow: 0 18px 60px rgba(15,23,42,0.10);
  overflow: hidden;
}

@media (max-width: 520px){
  #bjcalc{ padding: 14px; }
}

/* ---------------------------------------------------------
   Dark theme (second screenshot as baseline)
   - auto: follows prefers-color-scheme unless theme=light
   - force: [bjcalc theme="dark"]
   --------------------------------------------------------- */

/* Forced dark */
#bjcalc[data-theme="dark"]{
  --bj-page-bg: radial-gradient(1200px 600px at 20% 10%, rgba(59,130,246,0.18), transparent 60%),
                radial-gradient(1200px 700px at 80% 30%, rgba(239,68,68,0.12), transparent 55%),
                linear-gradient(180deg, #0b1220 0%, #070c16 100%);
  --bj-bg:#0b1020;
  --bj-surface:rgba(17,24,39,0.72);
  --bj-surface-2:rgba(148,163,184,0.10);

  --bj-text:#e5e7eb;
  --bj-muted:rgba(226,232,240,0.65);

  --bj-border:rgba(148,163,184,0.18);

  --bj-shadow:0 18px 46px rgba(0,0,0,0.45);
  --bj-shadow-sm:0 14px 38px rgba(0,0,0,0.35);

  --bj-ring:0 0 0 5px rgba(37,99,235,0.30);
}

/* Auto dark */
@media (prefers-color-scheme: dark){
  #bjcalc:not([data-theme="light"]) {
    --bj-page-bg: radial-gradient(1200px 600px at 20% 10%, rgba(59,130,246,0.18), transparent 60%),
                  radial-gradient(1200px 700px at 80% 30%, rgba(239,68,68,0.12), transparent 55%),
                  linear-gradient(180deg, #0b1220 0%, #070c16 100%);
    --bj-bg:#0b1020;
    --bj-surface:rgba(17,24,39,0.72);
    --bj-surface-2:rgba(148,163,184,0.10);

    --bj-text:#e5e7eb;
    --bj-muted:rgba(226,232,240,0.65);

    --bj-border:rgba(148,163,184,0.18);

    --bj-shadow:0 18px 46px rgba(0,0,0,0.45);
    --bj-shadow-sm:0 14px 38px rgba(0,0,0,0.35);

    --bj-ring:0 0 0 5px rgba(37,99,235,0.30);
  }
}

@media (prefers-color-scheme: dark){
  #bjcalc:not([data-theme="light"]) .bjhead{
    background: linear-gradient(180deg, rgba(17,24,39,0.92), rgba(17,24,39,0.72));
    border-color: var(--bj-border);
  }
  #bjcalc:not([data-theme="light"]) .bjcard{
    background: linear-gradient(180deg, rgba(17,24,39,0.78), rgba(17,24,39,0.62));
    border-color: var(--bj-border);
  }
  #bjcalc:not([data-theme="light"]) .bjlayout{ background: transparent; }
}

#bjcalc[data-theme="dark"] .bjhead{
  background: linear-gradient(180deg, rgba(17,24,39,0.92), rgba(17,24,39,0.72));
  border-color: var(--bj-border);
}
#bjcalc[data-theme="dark"] .bjcard{
  background: linear-gradient(180deg, rgba(17,24,39,0.78), rgba(17,24,39,0.62));
  border-color: var(--bj-border);
}

#bjcalc[data-brand="kakao"]{
  --bj-accent:#FEE500;
  --bj-accent-600:#F5D800;
  --bj-ring:0 0 0 5px rgba(254,229,0,0.22);
}

#bjcalc, #bjcalc *{ box-sizing:border-box; }
#bjcalc :where(button, input, select, textarea){
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
}
#bjcalc button{ -webkit-appearance:none; appearance:none; }

/* Theme collision shield: remove pseudo icons added by themes */
#bjcalc :where(button, summary)::before,
#bjcalc :where(button, summary)::after{
  content: none !important;
}

/* Shell */
#bjcalc .bjapp{
  background: transparent;
  border: 0;
  border-radius: var(--bj-radius-lg);
  box-shadow: none;
  overflow: visible;
}

/* Header */
#bjcalc .bjhead{
  padding: 18px 18px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--bj-radius-lg);
  background: #fff;
  box-shadow: var(--bj-shadow-sm);
}
#bjcalc[data-brand="kakao"] .bjhead{ background:#fff; }

#bjcalc .bjhead__row{
  display:flex;
  align-items:center;
  gap: 12px;
}

#bjcalc .bjlogo{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background: linear-gradient(135deg, #f43f5e, #ef4444);
  box-shadow: 0 12px 26px rgba(239,68,68,0.22);
  flex: 0 0 auto;
}

#bjcalc .bjhead__pro{
  margin-left: 8px;
  font-size: 12px;
  font-weight: 1000;
  color: #ef4444;
}
#bjcalc .bjhead__title{
  margin:0;
  font-size:22px;
  font-weight:1000;
  letter-spacing:-0.45px;
}
#bjcalc .bjhead__desc{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.6;
  color: var(--bj-muted);
}

/* Layout */
#bjcalc .bjlayout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 520px);
  gap: 16px;
  padding: 16px;
  align-items: start;
}
#bjcalc .bjleft{ min-width:0; }
#bjcalc .bjright{ position: sticky; top: 12px; }

@media (max-width: 1120px){
  /*
    Mobile: the fixed mini result bar (.bjmini) overlays the viewport.
    We reserve enough bottom padding so CTA/buttons at the end of the panel
    are not covered on iPhone/Android.

    - CSS fallback: 92px + safe-area
    - JS overrides: measures actual occupied height and sets --bj-mini-cover
  */
  #bjcalc{ --bj-mini-cover: calc(92px + env(safe-area-inset-bottom)); }
  #bjcalc .bjlayout{ grid-template-columns: 1fr; padding-bottom: calc(16px + var(--bj-mini-cover)); }
  #bjcalc .bjright{ position: static; }
}

/* Cards */
#bjcalc .bjcard{
  position: relative;
  background: var(--bj-surface);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--bj-radius);
  box-shadow: var(--bj-shadow-sm);
  padding: 16px;
}
#bjcalc .bjcard + .bjcard{ margin-top: 12px; }

/* Card accent line */
#bjcalc .bjcard::after{
  content:"";
  position:absolute;
  left:16px; right:16px; top:10px;
  height: 3px;
  border-radius: 999px;
  background: rgba(15,23,42,0.06);
}
#bjcalc .bjcard--settings::after{ background: rgba(37,99,235,0.26); }
#bjcalc .bjcard--calc::after{ background: rgba(37,99,235,0.18); }
#bjcalc .bjcard--result::after{ background: rgba(37,99,235,0.32); }
#bjcalc[data-brand="kakao"] .bjcard--settings::after{ background: rgba(254,229,0,0.35); }
#bjcalc[data-brand="kakao"] .bjcard--calc::after{ background: rgba(254,229,0,0.25); }
#bjcalc[data-brand="kakao"] .bjcard--result::after{ background: rgba(254,229,0,0.40); }

#bjcalc .sectionTitle,
#bjcalc .bjresult__title{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: -0.2px;
  display:flex;
  align-items:center;
  gap: 10px;
}

#bjcalc .bjresult__title{
  font-size: 18px;
}

/* Step badge */
#bjcalc .bjStep{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  color:#fff;
  background: linear-gradient(135deg, var(--bj-accent), var(--bj-accent-600));
  box-shadow: 0 10px 22px rgba(37,99,235,0.18);
  flex: 0 0 auto;
}
#bjcalc[data-brand="kakao"] .bjStep{
  color:#111;
  background: linear-gradient(135deg, #FEE500, #F5D800);
  box-shadow: 0 10px 22px rgba(254,229,0,0.22);
}

/* Grids */
#bjcalc .policyGrid,
#bjcalc .bjgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Give more room to policy select */
#bjcalc .policyGrid{
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
}

/*
  Critical (mobile overflow fix):
  Grid items default to min-width:auto which can cause the whole grid to expand
  when a child uses nowrap + scroll (e.g. the amount chips row).
  Setting min-width:0 allows the item to shrink and keeps inputs inside the card.
*/
#bjcalc .policyGrid > *,
#bjcalc .bjgrid > *{
  min-width: 0;
}

#bjcalc .bjinput,
#bjcalc .chips{
  min-width: 0;
  max-width: 100%;
}

#bjcalc .bjinput input{
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 720px){
  #bjcalc .policyGrid,
  #bjcalc .bjgrid{ grid-template-columns: 1fr; }
}

/* Text */
#bjcalc label{
  display:block;
  font-size:13px;
  margin: 10px 0 6px;
  font-weight: 900;
  color: rgba(15,23,42,0.90);
}
#bjcalc .hint{
  margin-top: 8px;
  color: var(--bj-muted);
  font-size: 12.8px;
  line-height: 1.5;
}
#bjcalc .callout{
  margin-top: 10px;
  background: rgba(15,23,42,0.03);
  border: 1px solid rgba(15,23,42,0.07);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--bj-muted);
  font-size: 12.8px;
  line-height: 1.5;
}
#bjcalc .muted{
  color: var(--bj-muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 8px;
}

/* Inputs */
#bjcalc input[type="number"], #bjcalc select{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  background:#fff;
  padding: 12px 12px;
  min-height: 46px;
  font-size: 15px;
  outline: none;
  max-width: 100%;
  min-width: 0;
}

/* iOS Safari: prevent input focus zoom (font-size must be >= 16px) */
@media (max-width: 480px){
  #bjcalc input[type="number"], #bjcalc select{ font-size: 16px; }
}

#bjcalc input[type="number"]:focus-visible, #bjcalc select:focus-visible{
  box-shadow: var(--bj-ring);
  border-color: rgba(37,99,235,0.55);
}
#bjcalc[data-brand="kakao"] input[type="number"]:focus-visible,
#bjcalc[data-brand="kakao"] select:focus-visible{
  border-color: rgba(254,229,0,0.90);
}

/* Policy select overflow */
#bjcalc #cfg_policy{
  font-size: 13px !important;
  -webkit-text-size-adjust: 100%;
  line-height: 1.2 !important;
  padding-right: 44px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#bjcalc #cfg_policy option{
  font-size: 13px !important;
}


/* Unit suffix */
#bjcalc .bjinput{ position: relative; display:flex; align-items:center; }
#bjcalc .bjinput input{ padding-right: 52px; }
#bjcalc .bjunit{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 900;
  color: var(--bj-muted);
  pointer-events:none;
}

/* Target highlight */
#bjcalc #r_target{
  background: linear-gradient(180deg, var(--bj-warm), #fff);
  border-color: var(--bj-warm-border);
}
#bjcalc #r_target:focus-visible{
  box-shadow: 0 0 0 5px rgba(231,182,91,0.22);
  border-color: rgba(231,182,91,0.95);
}

/* Segmented */
#bjcalc .seg{
  display:flex;
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(15,23,42,0.035);
  margin-top: 6px;
  min-height: 46px;
}
#bjcalc .seg input{ display:none; }
#bjcalc .seg label{
  margin:0;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  cursor:pointer;
  user-select:none;
  font-weight: 1000;
  color: rgba(15,23,42,0.62);
}
#bjcalc .seg input:checked + label{
  background:#fff;
  color: rgba(15,23,42,0.92);
}
#bjcalc .seg input:disabled + label{
  opacity: 0.5;
  cursor:not-allowed;
}

/* Tabs */
#bjcalc .bjtabs{
  display:flex;
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.07);
}
#bjcalc .bjtab{
  flex:1;
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.85);
  color: rgba(15,23,42,0.70);
  font-weight: 1000;
  padding: 10px 12px;
  cursor:pointer;
  transition: transform 0.05s ease, filter 0.15s ease;
}
#bjcalc .bjtab[aria-selected="true"]{
  background: var(--bj-accent);
  border-color: rgba(15,23,42,0.08);
}
#bjcalc[data-brand="kakao"] .bjtab[aria-selected="true"]{ color:#111; }
#bjcalc:not([data-brand="kakao"]) .bjtab[aria-selected="true"]{ color:#fff; }
#bjcalc .bjtab:active{ transform: translateY(1px); }
#bjcalc .bjtab:focus-visible{ box-shadow: var(--bj-ring); outline:none; }

/* Panel */
#bjcalc .bjpanel{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.92);
  padding: 16px;
}
#bjcalc .bjpanel__title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: -0.2px;
}

/* Chips */
#bjcalc .chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
#bjcalc .chip{
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.12);
  background:#fff;
  color: rgba(15,23,42,0.88) !important;
  /* v1.2.3: chips compact + consistent (prevents “too big” look) */
  padding: 6px 10px;
  min-height: 34px;
  font-size: 12.6px;
  font-weight: 900;
  cursor:pointer;
  line-height: 1.15;
  white-space: nowrap;
}
#bjcalc .chip:hover{ border-color: rgba(15,23,42,0.22); }
#bjcalc .chip.is-active{
  border-color: rgba(37,99,235,0.50);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
  transform: translateY(-1px);
}
#bjcalc[data-brand="kakao"] .chip.is-active{
  border-color: rgba(254,229,0,0.95);
  box-shadow: 0 0 0 4px rgba(254,229,0,0.22);
}
#bjcalc .chip:focus-visible{ box-shadow: var(--bj-ring); outline:none; }

/* Desktop/tablet: make amount chips align as a tidy grid (reduces uneven wrap) */
@media (min-width: 721px){
  #bjcalc .chips{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: 8px;
  }
  #bjcalc .chip{ width: 100%; text-align: center; }
}

@media (max-width: 720px){
  #bjcalc .chips{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 2px;
  }
  #bjcalc .chips::-webkit-scrollbar{ height: 0; }
  #bjcalc .chip{ flex: 0 0 auto; scroll-snap-align: start; }
}

/* Buttons */
#bjcalc .btn{
  width:100%;
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  cursor:pointer;
  font-weight: 1000;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 40%),
    linear-gradient(90deg, var(--bj-accent), var(--bj-accent-600));
  color:#fff !important;
  box-shadow: 0 10px 22px rgba(37,99,235,0.18);
}
#bjcalc .btn:hover{ filter: brightness(0.98); }
#bjcalc .btn:focus-visible{ box-shadow: var(--bj-ring); outline:none; }
#bjcalc[data-brand="kakao"] .btn{
  color:#111 !important;
  box-shadow: 0 10px 22px rgba(254,229,0,0.22);
}

#bjcalc .actions{
  display:flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
#bjcalc .btnLite{
  flex:1;
  min-width: 160px;
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,0.88) !important;
  font-weight: 1000;
  padding: 10px 12px;
  cursor:pointer;
}
#bjcalc .btnLite:hover{ border-color: rgba(15,23,42,0.22); }
#bjcalc .btnLite:focus-visible{ box-shadow: var(--bj-ring); outline:none; }

/* Result */
#bjcalc .summary{ display:grid; gap: 14px; }

/* --- Result card (Step 3) as dark report panel (matches target mockup) --- */
#bjcalc .bjcard--result{
  background: linear-gradient(180deg, #0f172a, #0b1220 78%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px rgba(2,6,23,0.55);
  border-radius: 34px;
  padding: 28px;
  color: rgba(255,255,255,0.92);
}
#bjcalc .bjcard--result::after{ display:none; }

#bjcalc .bjcard--result .bjresult__title{
  color: rgba(255,255,255,0.70);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Step badge color for Step 3 */
#bjcalc .bjcard--result .bjStep{
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 14px 30px rgba(239,68,68,0.25);
}

#bjcalc .bjcard--result .stat{
  border: 0;
  background: transparent;
  padding: 0;
}
#bjcalc .bjcard--result .stat::before{ display:none; }

#bjcalc .bjcard--result .stat--primary{
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: transparent;
}

#bjcalc .bjcard--result .stat--accent{
  padding: 12px 0 18px;
  background: transparent;
}

/* icon-only copy button (used in Step 3) */
#bjcalc .iconBtn{
  width: 52px;
  height: 52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  cursor:pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
#bjcalc .iconBtn svg{ width: 20px; height: 20px; }
#bjcalc .iconBtn:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.24);
}
#bjcalc .iconBtn:active{ transform: translateY(1px); }
#bjcalc .iconBtn:focus-visible{
  box-shadow: 0 0 0 5px rgba(59,130,246,0.22), 0 14px 34px rgba(0,0,0,0.28);
  outline:none;
}

/* Breakdown rows in Step 3 */
#bjcalc .bjbreak{
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display:grid;
  gap: 12px;
}
#bjcalc .bjline{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
#bjcalc .bjline__k{ color: rgba(255,255,255,0.62); }
#bjcalc .bjline__v{ color:#fff; font-weight: 1000; font-variant-numeric: tabular-nums; }
#bjcalc .bjline__v--neg{ color: #fb7185; }
#bjcalc .bjline__v--pos{ color: #60a5fa; }
#bjcalc .bjline--total{ padding-top: 10px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,0.10); }

/* Notice box in Step 3 */
#bjcalc .bjnotice{
  margin-top: 16px;
  padding: 14px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
#bjcalc .bjnotice__icon{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.08);
  flex: 0 0 auto;
}
#bjcalc .bjnotice__text{
  color: rgba(255,255,255,0.65);
  font-size: 11.5px;
  line-height: 1.55;
}

#bjcalc .bjcard--result .stat .k{
  color: rgba(255,255,255,0.60);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 1000;
}

#bjcalc .bjcard--result .stat .v{
  color: #fff;
  font-size: 40px;
  font-weight: 1200;
  letter-spacing: -0.02em;
}

#bjcalc .bjcard--result .stat--accent .v{
  color: #fb7185;
  font-size: 34px;
}

#bjcalc .stat{
  position: relative;
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.10);
  background:#fff;
  padding: 14px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
}
#bjcalc .stat::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  background: rgba(15,23,42,0.08);
}
#bjcalc .stat--primary{
  background:
    radial-gradient(900px 220px at 0% 0%, rgba(37,99,235,0.18), rgba(37,99,235,0) 60%),
    linear-gradient(180deg, rgba(255,247,230,0.95), rgba(255,255,255,0.92));
}
#bjcalc .stat--primary::before{
  width:7px;
  background: var(--bj-accent);
}
#bjcalc[data-brand="kakao"] .stat--primary{
  background:
    radial-gradient(900px 220px at 0% 0%, rgba(254,229,0,0.30), rgba(254,229,0,0) 60%),
    linear-gradient(180deg, rgba(255,247,230,0.95), rgba(255,255,255,0.92));
}
#bjcalc[data-brand="kakao"] .stat--primary::before{ background:#111; }

#bjcalc .stat .k{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,0.62);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#bjcalc .stat .v{
  font-size: 22px;
  font-weight: 1200;
  letter-spacing: -0.4px;
  color: rgba(15,23,42,0.95);
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}
#bjcalc .stat__right{
  justify-self: end;
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
}

#bjcalc .copyBtn{
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,0.88) !important;
  font-weight: 1000;
  padding: 8px 12px;
  cursor:pointer;
  min-height: 38px;
  white-space: nowrap;
  flex: 0 0 auto;
}
#bjcalc .copyBtn:hover{ border-color: rgba(15,23,42,0.22); }
#bjcalc .copyBtn:focus-visible{ box-shadow: var(--bj-ring); outline:none; }

/* Details */
#bjcalc details{ margin-top: 12px; }
#bjcalc .bjdetails{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.92);
  padding: 12px;
}
#bjcalc .bjdetails > summary{
  cursor:pointer;
  font-weight: 1000;
  list-style:none !important;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
#bjcalc .bjdetails > summary::-webkit-details-marker{ display:none !important; }
#bjcalc .bjchev{ color: var(--bj-muted); font-weight: 1000; }

#bjcalc .bjdetailRows{ margin-top: 10px; display:grid; gap: 10px; }

/* Table */
#bjcalc table{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}
#bjcalc th, #bjcalc td{
  border-bottom: 1px solid rgba(15,23,42,0.08);
  padding: 8px 6px;
  text-align: right;
}
#bjcalc th:first-child, #bjcalc td:first-child{ text-align:left; }
#bjcalc th{
  background: rgba(15,23,42,0.035);
  color: rgba(15,23,42,0.72);
  font-weight: 1000;
}

/* Official links */
#bjcalc .bjlinks{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
#bjcalc .bjlinks a{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.92);
  color: rgba(15,23,42,0.88) !important;
  text-decoration:none;
  font-weight: 900;
  font-size: 12.5px;
}
#bjcalc .bjlinks a:hover{ border-color: rgba(15,23,42,0.22); }

#bjcalc .bjsubhead{ font-weight: 1000; margin-bottom: 6px; }

/* Toast */
#bjcalc .bjtoast{
  position: fixed;
  left: 50%;
  /* Above iOS safe-area and the mobile mini result bar */
  bottom: calc(18px + var(--bj-mini-cover, 0px));
  transform: translateX(-50%) translateY(12px);
  background: rgba(15,23,42,0.92);
  color:#fff;
  padding: 10px 14px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 13px;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9999;
  max-width: min(520px, calc(100vw - 24px));
  text-align:center;
}
#bjcalc .bjtoast.is-show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* Mobile mini bar */
#bjcalc .bjmini{ display:none; }
@media (max-width: 1120px){
  #bjcalc .bjmini{
    display:block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 9998;
  }
  #bjcalc .bjmini__btn{
    width:100%;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86));
    border: 1px solid rgba(15,23,42,0.10);
    box-shadow: var(--bj-shadow);
    padding: 10px 12px;
    display:flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    cursor:pointer;
    min-height: 54px;
  }
  #bjcalc .bjmini__left, #bjcalc .bjmini__right{
    display:grid;
    gap: 2px;
    text-align:left;
    min-width: 0;
  }
  #bjcalc .bjmini__label{
    font-size: 12px;
    font-weight: 900;
    color: var(--bj-muted);
    white-space: nowrap;
  }
  #bjcalc .bjmini__value{
    font-size: 15px;
    font-weight: 1100;
    color: rgba(15,23,42,0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #bjcalc .bjmini__sep{
    width: 1px;
    height: 28px;
    background: rgba(15,23,42,0.10);
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce){
  #bjcalc .bjtab, #bjcalc .bjtoast{ transition:none !important; }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  #bjcalc{
    --bj-bg: rgba(2, 6, 23, 0.98);
    --bj-surface: #0f172a;
    --bj-surface-2: rgba(148, 163, 184, 0.06);
    --bj-text: #e5e7eb;
    --bj-muted: rgba(226, 232, 240, 0.68);
    --bj-border: rgba(226, 232, 240, 0.16);
    --bj-shadow: 0 14px 30px rgba(0,0,0,0.38);
    --bj-shadow-sm: 0 12px 26px rgba(0,0,0,0.32);
  }

  #bjcalc .bjcard,
  #bjcalc .bjpanel,
  #bjcalc .bjdetails,
  #bjcalc .stat{
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(226, 232, 240, 0.14);
  }

  #bjcalc input[type="number"], #bjcalc select{
    background: rgba(2,6,23,0.55);
    border-color: rgba(226,232,240,0.16);
    color: var(--bj-text);
  }

  #bjcalc .chip,
  #bjcalc .btnLite,
  #bjcalc .copyBtn,
  #bjcalc .bjlinks a{
    background: rgba(2,6,23,0.35);
    border-color: rgba(226,232,240,0.16);
    color: rgba(226,232,240,0.92) !important;
  }

  #bjcalc .stat--primary{
    background:
      radial-gradient(900px 220px at 0% 0%, rgba(37,99,235,0.22), rgba(37,99,235,0) 60%),
      rgba(15, 23, 42, 0.86);
  }

  #bjcalc .stat .k{ color: rgba(226,232,240,0.70); }
  #bjcalc .stat .v{ color: rgba(226,232,240,0.96); }

  #bjcalc .bjtabs{
    background: rgba(226,232,240,0.06);
    border-color: rgba(226,232,240,0.10);
  }
  #bjcalc .bjtab{
    background: rgba(2,6,23,0.35);
    border-color: rgba(226,232,240,0.10);
    color: rgba(226,232,240,0.72);
  }
}

/* -------------------------
   BJDoc (Text blocks / Templates)
   Independent: can be inserted as separate Elementor widgets
   ------------------------- */

.bjdoc-block{
  --bjdoc-max: 1180px;
  --bjdoc-text: #0b1220;
  --bjdoc-muted: rgba(15,23,42,0.65);
  --bjdoc-line: rgba(15,23,42,0.10);
  --bjdoc-accent: #2563eb;

  max-width: min(var(--bjdoc-max), 100%);
  margin: 26px auto 0;
  padding: 0 16px;
  color: var(--bjdoc-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

.bjdoc-block, .bjdoc-block *{ box-sizing: border-box; }

/* Card container */
.bjdoc-card{
  background: #fff;
  border: 1px solid var(--bjdoc-line);
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(15,23,42,0.06);
  padding: 18px;
}

/* Titles */
.bjdoc-title{
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: -0.5px;
}
.bjdoc-subtitle{
  margin: 18px 0 10px;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -0.3px;
}

/* Body text */
.bjdoc-card p{ margin: 10px 0; color: rgba(15,23,42,0.84); }
.bjdoc-card strong{ font-weight: 1000; }
.bjdoc-card code{
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(15,23,42,0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}


/* Fallback: when you paste raw HTML inside .bjdoc-card (e.g. Elementor HTML widget),
   headings/lists/blockquote/table also get “premium doc” styling without extra classes. */
.bjdoc-card h2:not(.bjdoc-title){
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: -0.5px;
}
.bjdoc-card h3:not(.bjdoc-subtitle):not(.h){
  margin: 18px 0 10px;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -0.3px;
}
.bjdoc-card ul, .bjdoc-card ol{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(15,23,42,0.84);
}
.bjdoc-card li{ margin: 6px 0; }

.bjdoc-card blockquote{
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
}
.bjdoc-card blockquote p{ margin: 0; }
.bjdoc-card blockquote strong{ font-weight: 1000; }

/* Tables inside doc cards (generic) */
.bjdoc-card table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.bjdoc-card th, .bjdoc-card td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  text-align: right;
}
.bjdoc-card th:first-child, .bjdoc-card td:first-child{ text-align: left; }
.bjdoc-card thead th{
  background: rgba(15,23,42,0.03);
  font-weight: 1000;
  color: rgba(15,23,42,0.72);
}

/* Checklist */
.bjdoc-check{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}
.bjdoc-check li{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 16px;
  padding: 12px 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  background: #fff;
}
.bjdoc-check li::before{
  content:"✓";
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,0.12);
  color: var(--bjdoc-accent);
  font-weight: 1000;
  flex: 0 0 auto;
}

/* Note boxes */
.bjdoc-note{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--bjdoc-line);
  background: rgba(15,23,42,0.03);
}
.bjdoc-note--update{
  border-color: rgba(37,99,235,0.20);
  background: rgba(37,99,235,0.06);
}
.bjdoc-note--warn{
  border-color: rgba(245,158,11,0.25);
  background: rgba(245,158,11,0.10);
}
.bjdoc-note .t{
  font-weight: 1000;
  display:block;
}
.bjdoc-note .d{
  margin-top: 6px;
  color: rgba(15,23,42,0.80);
}

/* Facts (3 cards) */
.bjdoc-facts{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 860px){
  .bjdoc-facts{ grid-template-columns: 1fr; }
}
.bjdoc-fact{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  background:#fff;
  padding: 14px 14px;
}
.bjdoc-fact .k{
  font-size: 12.5px;
  color: var(--bjdoc-muted);
  font-weight: 900;
}
.bjdoc-fact .v{
  font-size: 18px;
  font-weight: 1100;
  letter-spacing: -0.3px;
  margin-top: 6px;
}

/* Compare (2 columns) */
.bjdoc-compare{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 860px){
  .bjdoc-compare{ grid-template-columns: 1fr; }
}
.bjdoc-box{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  background:#fff;
  padding: 14px 14px;
}
.bjdoc-box--accent{
  background: linear-gradient(180deg, rgba(37,99,235,0.10), #fff 45%);
  border-color: rgba(37,99,235,0.18);
}
.bjdoc-box .h{
  margin: 0 0 8px;
  font-weight: 1000;
}
.bjdoc-box ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,23,42,0.84);
}

/* Steps/Ordered list */
.bjdoc-steps{
  margin: 12px 0 0;
  padding-left: 18px;
}
.bjdoc-steps li{ margin: 8px 0; }

/* Table */
.bjdoc-tableWrap{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.10);
  background:#fff;
  overflow: hidden;
}
.bjdoc-tableScroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.bjdoc-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.bjdoc-table th, .bjdoc-table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  text-align: right;
}
.bjdoc-table th:first-child, .bjdoc-table td:first-child{ text-align:left; }
.bjdoc-table thead th{
  background: rgba(15,23,42,0.03);
  font-weight: 1000;
  color: rgba(15,23,42,0.72);
}
.bjdoc-table tbody tr:hover td{ background: rgba(37,99,235,0.04); }

/* -------------------------
   BJDoc FAQ Accordion
   ------------------------- */

.bjdoc-block .bjfaq{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.bjdoc-block .bjfaq-item{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

/* Kill markers/pseudo icons that themes may add */
.bjdoc-block .bjfaq-item summary{
  list-style: none;
}
.bjdoc-block .bjfaq-item summary::-webkit-details-marker{
  display: none;
}
.bjdoc-block .bjfaq-item summary::before,
.bjdoc-block .bjfaq-item summary::after{
  content: none !important;
}

.bjdoc-block .bjfaq-item > summary{
  cursor: pointer;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 1000;
  letter-spacing: -0.2px;
  color: rgba(15,23,42,0.92);
  background: linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0.00));
}

.bjdoc-block .bjfaq-q{
  width: 44px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  flex: 0 0 auto;
}
.bjdoc-block .bjfaq-t{
  min-width: 0;
  flex: 1 1 auto;
}
.bjdoc-block .bjfaq-icon{
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-right: 2px solid rgba(15,23,42,0.45);
  border-bottom: 2px solid rgba(15,23,42,0.45);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.bjdoc-block .bjfaq-item[open] > summary .bjfaq-icon{
  transform: rotate(-135deg);
}

.bjdoc-block .bjfaq-body{
  padding: 0 14px 14px;
  border-top: 1px solid rgba(15,23,42,0.08);
  background: #fff;
}
.bjdoc-block .bjfaq-body p{
  margin: 10px 0 0;
  color: rgba(15,23,42,0.84);
}
.bjdoc-block .bjfaq-note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(245,158,11,0.25);
  background: rgba(245,158,11,0.10);
  color: rgba(15,23,42,0.78);
  font-size: 14px;
  line-height: 1.6;
}

.bjdoc-block .bjfaq-item > summary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 5px rgba(37,99,235,0.18);
  border-radius: 18px;
}

@media (prefers-reduced-motion: reduce){
  .bjdoc-block .bjfaq-icon{ transition: none; }
}

/* =========================================================
   BJCalc v1.2.1 — Alignment / Spacing / Word-wrap Polish
   (사용자 피드백 반영: 붉은 박스 영역 중심)
   ========================================================= */

/* 1) 한글/숫자 줄바꿈: 테마의 break-all 영향으로 단어가 쪼개지는 현상 방지 */
#bjcalc,
#bjcalc :where(p, label, .hint, .muted, .callout, .seg label, .stat .k){
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 2) 설정 영역 2열 비율 재조정: 정산 방식(세그먼트) 라벨이 줄바꿈으로 깨지지 않도록 우측을 더 확보 */
#bjcalc .policyGrid{
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
  align-items: start;
}

/* 3) Select(정책 프리셋): 높이/여백 안정화 + 긴 텍스트는 ... */
#bjcalc select{
  line-height: 1.2;
}

/* 4) 정산 방식 Segmented: 한 줄 고정 + 정렬/높이 통일 */
#bjcalc .seg{ min-height: 46px; }
#bjcalc .seg label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  padding: 9px 10px;
  font-size: 13px;
}

/* 5) 힌트 텍스트: 컨트롤과의 간격을 조금만 타이트하게(읽기 좋게) */
#bjcalc .hint{
  margin-top: 6px;
}

/* 6) 택배 옵션(details) 요약 행: 시각적 affordance(chevron)
      - 고급 설정/상세(details)는 기존 UI를 유지
      - 탭 패널 내(details)만 화살표를 추가해 직관성 강화 */
#bjcalc .bjpanel details.bjdetails > summary::after{
  content: "" !important; /* theme shield override */
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-left: 10px;
  border-right: 2px solid rgba(15,23,42,0.42);
  border-bottom: 2px solid rgba(15,23,42,0.42);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
#bjcalc .bjpanel details.bjdetails[open] > summary::after{
  transform: rotate(-135deg);
}

/* 7) 메인 계산 버튼: details와 너무 붙어 보이는 느낌 완화 */
#bjcalc #btnSolve{ margin-top: 12px; }

/* 8) 결과 카드(특히 추천 판매가 행): 값/복사 버튼 수평 정렬 안정화 */
#bjcalc .stat__right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
#bjcalc .copyBtn{
  padding: 7px 11px;
}

/* =========================================================
   BJCalc v1.2.2 PATCH: Chips + Recommended Row polish
   - 금액 칩(버튼) 과대해 보이는 문제 축소
   - 추천 판매가(stat) 행 정렬/여백 + 시각적 강조
   ========================================================= */

/* 0) 텍스트 줄바꿈 안정(테마의 break-all 대응) */
#bjcalc{
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* 1) Chips: compact sizing */
#bjcalc .chips{
  gap: 6px !important;
}

#bjcalc .chip,
#bjcalc button.chip{
  padding: 6px 10px !important;
  min-height: 32px !important;
  font-size: 12.5px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.1px !important;
}

#bjcalc .chip.is-active{
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}

#bjcalc[data-brand="kakao"] .chip.is-active{
  box-shadow: 0 0 0 3px rgba(254,229,0,0.22) !important;
}

/* 2) Stat rows: compact + baseline-friendly */
#bjcalc .stat{
  padding: 12px 14px !important;
}

#bjcalc .stat .k{
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

#bjcalc .stat .v{
  line-height: 1.15 !important;
}

/* 3) Copy button: smaller so rows look tighter */
#bjcalc .copyBtn{
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  line-height: 1.15 !important;
}

/* 4) Recommended row: accent + alignment polish */
#bjcalc #sumRowRecommended.stat{
  background: linear-gradient(180deg, rgba(37,99,235,0.10), rgba(241,245,249,0.92) 62%) !important;
  border-color: rgba(37,99,235,0.14) !important;
}

#bjcalc #sumRowRecommended.stat::before{
  background: rgba(37,99,235,0.78) !important;
}

#bjcalc[data-brand="kakao"] #sumRowRecommended.stat{
  background: linear-gradient(180deg, rgba(254,229,0,0.22), rgba(241,245,249,0.92) 62%) !important;
  border-color: rgba(254,229,0,0.22) !important;
}

#bjcalc[data-brand="kakao"] #sumRowRecommended.stat::before{
  background: rgba(17,17,17,0.85) !important;
}


/* 4-b) Step 3(다크 리포트 패널)에서 추천 판매가 행 가독성/아이콘 대비 보정
   - v1.2.2 패치의 '밝은 그라디언트' 배경과 충돌해서 라벨이 흐려지는 문제 해결
   - 아이콘 버튼을 행 배경에 맞춰 자동 대비 (추천 판매가 행은 어두운 아이콘) */
#bjcalc .bjcard--result #sumRowRecommended.stat .k{
  color: rgba(15,23,42,0.78) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55) !important;
}
#bjcalc .bjcard--result #sumRowRecommended.stat .iconBtn{
  background: rgba(15,23,42,0.06) !important;
  border: 1px solid rgba(15,23,42,0.14) !important;
  color: rgba(15,23,42,0.78) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
}
#bjcalc .bjcard--result #sumRowRecommended.stat .iconBtn:hover{
  background: rgba(15,23,42,0.10) !important;
  border-color: rgba(15,23,42,0.22) !important;
}

/* =========================================================
   BJCalc v1.3.1 PATCH: Mobile readability hardening
   1) Step 3 summary: show full labels on mobile (no ellipsis)
   2) Details rows: avoid inheriting oversized Step 3 stat typography
   3) Mobile mini bar: label contrast on both light & dark
   ========================================================= */

/* 1) Step 3 summary labels: on small screens, put label on its own line */
@media (max-width: 520px){
  #bjcalc .bjcard--result .summary .stat{
    grid-template-columns: 1fr !important;
    row-gap: 6px;
    align-items: start;
  }
  #bjcalc .bjcard--result .summary .stat .k{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100%;
  }
  /* prevent large amounts from overflowing on narrow iPhones */
  #bjcalc .bjcard--result .summary .stat .v{
    font-size: clamp(28px, 8.2vw, 40px);
  }
  #bjcalc .bjcard--result .summary .stat--accent .v{
    font-size: clamp(24px, 7.2vw, 34px);
  }
}

/* 2) Details rows: restore compact, readable 'stat' styling inside the detail accordion */
#bjcalc .bjcard--result .bjdetailRows .stat{
  /* override Step 3 summary "transparent stat" rules */
  border: 1px solid var(--bj-border) !important;
  background: var(--bj-surface-2) !important;
  border-radius: 16px;
  padding: 10px 12px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
}
#bjcalc .bjcard--result .bjdetailRows .stat::before{ display:none !important; }

#bjcalc .bjcard--result .bjdetailRows .stat .k{
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: var(--bj-muted) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#bjcalc .bjcard--result .bjdetailRows .stat .v{
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 1100 !important;
  letter-spacing: -0.02em !important;
  color: var(--bj-text) !important;
  white-space: normal !important;
  text-align: right;
}

@media (max-width: 520px){
  #bjcalc .bjcard--result .bjdetailRows .stat{
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  #bjcalc .bjcard--result .bjdetailRows .stat .v{
    text-align: left;
    font-size: 16px !important;
  }
}

/* 3) Mobile mini bar: label contrast (light + dark)
   - Current issue: labels are too faint against the frosted background on iOS.
   - Fix: slightly darker labels in light UI, and a proper dark mini-bar in dark UI. */
@media (max-width: 1120px){
  #bjcalc .bjmini__label{
    color: rgba(15,23,42,0.78) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  }
}

/* Forced dark */
@media (max-width: 1120px){
  #bjcalc[data-theme="dark"] .bjmini__btn{
    background: linear-gradient(180deg, rgba(17,24,39,0.84), rgba(17,24,39,0.66)) !important;
    border-color: rgba(226,232,240,0.14) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  #bjcalc[data-theme="dark"] .bjmini__label{
    color: rgba(226,232,240,0.72) !important;
    text-shadow: none !important;
  }
  #bjcalc[data-theme="dark"] .bjmini__value{ color: rgba(226,232,240,0.96) !important; }
  #bjcalc[data-theme="dark"] .bjmini__sep{ background: rgba(226,232,240,0.18) !important; }
}

/* Auto dark (prefers-color-scheme) */
@media (prefers-color-scheme: dark) and (max-width: 1120px){
  #bjcalc:not([data-theme="light"]) .bjmini__btn{
    background: linear-gradient(180deg, rgba(17,24,39,0.84), rgba(17,24,39,0.66)) !important;
    border-color: rgba(226,232,240,0.14) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  #bjcalc:not([data-theme="light"]) .bjmini__label{
    color: rgba(226,232,240,0.72) !important;
    text-shadow: none !important;
  }
  #bjcalc:not([data-theme="light"]) .bjmini__value{ color: rgba(226,232,240,0.96) !important; }
  #bjcalc:not([data-theme="light"]) .bjmini__sep{ background: rgba(226,232,240,0.18) !important; }
}

/* =========================================================
   2026 Pro UI refresh (mock alignment)
   - Applies the reference mock's typography, component layout,
     and dark-mode control styling.
   Version: 1.4.2
   ========================================================= */

/* Design tokens */
#bjcalc{
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, Arial, sans-serif;

  --bj-danger: #fb7185;
  --bj-danger-bg: rgba(251,113,133,0.10);
  --bj-danger-border: rgba(251,113,133,0.28);

  --bj-card-bg: rgba(255,255,255,0.94);
  --bj-card-border: rgba(15,23,42,0.10);
  --bj-control-bg: rgba(15,23,42,0.04);
  --bj-control-border: rgba(15,23,42,0.10);
  --bj-control-text: rgba(15,23,42,0.92);
  --bj-control-muted: rgba(15,23,42,0.62);
}

#bjcalc[data-theme="dark"]{
  --bj-card-bg: rgba(255,255,255,0.04);
  --bj-card-border: rgba(226,232,240,0.10);
  --bj-control-bg: rgba(255,255,255,0.06);
  --bj-control-border: rgba(226,232,240,0.14);
  --bj-control-text: rgba(226,232,240,0.94);
  --bj-control-muted: rgba(226,232,240,0.65);
}

@media (prefers-color-scheme: dark){
  #bjcalc:not([data-theme="light"]) {
    --bj-card-bg: rgba(255,255,255,0.04);
    --bj-card-border: rgba(226,232,240,0.10);
    --bj-control-bg: rgba(255,255,255,0.06);
    --bj-control-border: rgba(226,232,240,0.14);
    --bj-control-text: rgba(226,232,240,0.94);
    --bj-control-muted: rgba(226,232,240,0.65);
  }
}

/* Header: match mock (no card frame, right-side pill button) */
#bjcalc .bjhead{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 10px 6px 18px !important;
}

#bjcalc .bjhead__row{
  justify-content: space-between;
}

#bjcalc .bjhead__left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

#bjcalc .bjhead__right{ flex: 0 0 auto; }

#bjcalc .bjhead__pro{
  color: #f97316 !important;
  font-weight: 1100;
}

#bjcalc .bjhead__desc{
  margin-top: 6px;
  font-size: 13.5px;
}

#bjcalc .bjhead__pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--bj-card-border);
  background: var(--bj-card-bg);
  color: var(--bj-control-text) !important;
  text-decoration:none;
  font-weight: 1000;
  font-size: 13px;
  white-space: nowrap;
}
#bjcalc .bjhead__pill:hover{ filter: brightness(1.02); }

/* Layout spacing */
#bjcalc .bjlayout{
  gap: 18px !important;
  padding: 18px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 1120px){
  #bjcalc .bjlayout{ grid-template-columns: 1fr; }
}

/* Cards: match mock (no top accent line, softer surface) */
#bjcalc .bjcard{
  background: var(--bj-card-bg) !important;
  border: 1px solid var(--bj-card-border) !important;
  border-radius: 30px !important;
  padding: 22px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.16) !important;
}

@media (prefers-color-scheme: dark){
  #bjcalc:not([data-theme="light"]) .bjcard{
    box-shadow: 0 24px 80px rgba(0,0,0,0.38) !important;
  }
}

#bjcalc[data-theme="dark"] .bjcard{ box-shadow: 0 24px 80px rgba(0,0,0,0.38) !important; }

#bjcalc .bjcard::after{ display:none !important; }

/* Section titles */
#bjcalc .sectionTitle,
#bjcalc .bjresult__title{
  font-size: 15px !important;
  font-weight: 1100 !important;
  margin-bottom: 14px !important;
}

/* Controls: dark-mode safe (no white inputs) */
#bjcalc input[type="number"],
#bjcalc select{
  background: var(--bj-control-bg) !important;
  border: 1px solid var(--bj-control-border) !important;
  color: var(--bj-control-text) !important;
}

#bjcalc label{ color: var(--bj-control-text) !important; opacity: 0.92; }
#bjcalc .hint, #bjcalc .muted{ color: var(--bj-control-muted) !important; }

/* Policy select (truncate like mock, avoid theme arrows) */
#bjcalc #cfg_policy{
  font-size: 13px !important;
  border-radius: 18px !important;
}

/* Segmented controls */
#bjcalc .seg{
  background: rgba(0,0,0,0.00) !important;
  border: 1px solid var(--bj-control-border) !important;
  border-radius: 18px !important;
}
#bjcalc .seg label{
  color: var(--bj-control-muted) !important;
  font-weight: 1000 !important;
}
#bjcalc .seg input:checked + label{
  background: rgba(255,255,255,0.08) !important;
  color: var(--bj-control-text) !important;
}

/* Tabs: mock-style segmented */
#bjcalc .bjtabs{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bj-control-border) !important;
  border-radius: 22px !important;
  padding: 8px !important;
}
#bjcalc .bjtab{
  border-radius: 18px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--bj-control-muted) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
#bjcalc .bjtab[aria-selected="true"]{
  background: var(--bj-accent) !important;
  color: #fff !important;
}
#bjcalc[data-brand="kakao"] .bjtab[aria-selected="true"]{ color:#111 !important; }

#bjcalc .bjtab__icon{ display:inline-flex; align-items:center; justify-content:center; }

/* Panel: remove inner card framing (mock uses single card) */
#bjcalc .bjpanel{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#bjcalc .bjpanel__title{ display:none !important; }

/* In-panel grid: mock is single column, hide the right-side explanatory column */
#bjcalc .bjpanel .bjgrid{
  grid-template-columns: 1fr !important;
}
#bjcalc .bjpanel .bjgrid > :nth-child(2){
  display:none !important;
}

/* Money input wrapper */
#bjcalc .bjinput{
  border-radius: 20px !important;
  border: 1px solid var(--bj-control-border) !important;
  background: var(--bj-control-bg) !important;
}
#bjcalc .bjinput input{
  border: 0 !important;
  background: transparent !important;
  color: var(--bj-control-text) !important;
  /* leave room for the unit suffix on the right */
  padding: 14px 58px 14px 16px !important;
  min-height: 56px !important;
  font-size: 18px !important;
  font-weight: 1100 !important;
}

/* Hero input (reverse target): larger like mock */
#bjcalc .bjinput--hero input{
  font-size: 34px !important;
  min-height: 74px !important;
  letter-spacing: -0.03em !important;
  padding: 18px 70px 18px 18px !important;
}

#bjcalc .bjunit{
  color: var(--bj-control-muted) !important;
  font-weight: 1000 !important;
}

/* Chips: grid, dark-friendly */
#bjcalc .chips{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: visible !important;
}
@media (max-width: 520px){
  #bjcalc .chips{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

#bjcalc .chip{
  width: 100% !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bj-control-border) !important;
  color: var(--bj-control-text) !important;
  min-height: 38px !important;
  font-size: 12.6px !important;
}

/* Action bar: reset + primary copy */
#bjcalc .bjactionbar{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 420px){
  #bjcalc .bjactionbar{ grid-template-columns: 1fr; }
}

#bjcalc .btnGhost,
#bjcalc .btnPrimary,
#bjcalc .btnLink{
  font: inherit !important;
}

#bjcalc .btnGhost{
  min-height: 52px;
  border-radius: 18px;
  border: 1px solid var(--bj-control-border);
  background: rgba(255,255,255,0.04);
  color: var(--bj-control-text) !important;
  font-weight: 1000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  cursor:pointer;
}

#bjcalc .btnPrimary{
  min-height: 52px;
  border-radius: 18px;
  border: 0;
  background: var(--bj-accent);
  color: #fff !important;
  font-weight: 1100;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  cursor:pointer;
  box-shadow: 0 18px 42px rgba(37,99,235,0.24);
}

#bjcalc .btnPrimary:hover{ filter: brightness(1.02); }
#bjcalc .btnGhost:hover{ filter: brightness(1.04); }

#bjcalc[data-brand="kakao"] .btnPrimary{ color:#111 !important; }

/* Share link button: de-emphasized */
#bjcalc .btnLink{
  margin-top: 10px;
  padding: 10px 2px;
  border: 0;
  background: transparent;
  color: var(--bj-control-muted) !important;
  font-weight: 900;
  cursor:pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Info box (mock bottom guidance message) */
#bjcalc .bjinfobox{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 22px;
  border: 1px solid var(--bj-control-border);
  background: rgba(37,99,235,0.08);
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

#bjcalc .bjinfobox__icon{
  width: 22px;
  height: 22px;
  border-radius: 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1100;
  color: var(--bj-control-muted);
  background: rgba(255,255,255,0.06);
  flex: 0 0 auto;
}

#bjcalc .bjinfobox__text{
  color: var(--bj-control-text);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 900;
}

#bjcalc .bjinfobox__text strong{
  font-weight: 1100;
}

/* Details / callouts should not turn white in dark mode */
#bjcalc .bjdetails{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bj-control-border) !important;
  border-radius: 22px !important;
  padding: 14px !important;
}
#bjcalc .bjdetails > summary{
  color: var(--bj-control-text) !important;
}
#bjcalc .bjchev{ color: var(--bj-control-muted) !important; }

#bjcalc .callout{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--bj-control-border) !important;
  color: var(--bj-control-muted) !important;
}

/* Result card: align with mock (not the old ultra-dark report panel) */
#bjcalc .bjcard--result{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
  border: 1px solid var(--bj-card-border) !important;
  border-radius: 34px !important;
  padding: 26px !important;
  color: var(--bj-control-text) !important;
}

/* Light UI: keep the result card solid (better contrast) */
#bjcalc[data-theme="light"] .bjcard--result{
  background: var(--bj-card-bg) !important;
}
@media (prefers-color-scheme: light){
  #bjcalc:not([data-theme="dark"]) .bjcard--result{
    background: var(--bj-card-bg) !important;
  }
}

/* Step 3 badge stays warm */
#bjcalc .bjcard--result .bjStep{
  background: linear-gradient(135deg, #ef4444, #f97316) !important;
}

/* Stat groups in result */
#bjcalc .summary{ gap: 16px !important; }

#bjcalc .bjstatlabel{
  font-size: 12.8px;
  font-weight: 900;
  color: var(--bj-control-muted);
  margin-bottom: 10px;
}

#bjcalc .bjstatcard{
  border-radius: 24px;
  border: 1px solid var(--bj-control-border);
  background: rgba(255,255,255,0.04);
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

#bjcalc .bjstatvalue{
  font-size: 34px;
  font-weight: 1200;
  letter-spacing: -0.03em;
  color: var(--bj-control-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 520px){
  #bjcalc .bjstatvalue{ font-size: 30px; }
}

#bjcalc .bjstatcard--accent{
  border-color: var(--bj-danger-border);
  background: rgba(251,113,133,0.10);
}

#bjcalc .bjstatvalue--accent{ color: var(--bj-danger); }

/* Copy icon buttons in result */
#bjcalc .iconBtn{
  width: 60px !important;
  height: 60px !important;
  border-radius: 22px !important;
  border: 1px solid var(--bj-control-border) !important;
  background: rgba(255,255,255,0.08) !important;
  color: var(--bj-control-text) !important;
  box-shadow: none !important;
}

#bjcalc .iconBtn svg{
  width: 28px !important;
  height: 28px !important;
}

#bjcalc .iconBtn--accent{
  border-color: var(--bj-danger-border) !important;
  background: rgba(251,113,133,0.22) !important;
  color: rgba(255,255,255,0.98) !important;
}

/* Breakdown (Step 3) readability in mixed themes */
#bjcalc .bjline__k{ color: var(--bj-control-muted) !important; }
#bjcalc .bjline__v{ color: var(--bj-control-text) !important; }

/* Step 3 separators + notice box: use theme border */
#bjcalc .bjbreak{ border-top-color: var(--bj-control-border) !important; }
#bjcalc .bjline--total{ border-top-color: var(--bj-control-border) !important; }

#bjcalc .bjnotice{
  border-color: var(--bj-control-border) !important;
  background: rgba(255,255,255,0.04) !important;
}

#bjcalc .bjlinks a{
  border-color: var(--bj-control-border) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--bj-control-text) !important;
}