/* bp 퍼센트 변환기 전용 CSS (2026-10-20). 공용 부품은 assets/v2.css. 머리(결과 | 금리·이자) → 입력 → 1%p 판 → 안내·버튼, 줄마다 폭을 꽉 채운다. */
.bpp-work{container:bpp / inline-size}
.bpp-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 26px;padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.bpp-res{display:flex;flex-direction:column;min-width:0}
.bpp-res .v2-formula{margin-top:auto;padding-top:12px;white-space:normal;overflow-wrap:anywhere} /* 식 줄을 오른쪽 행 아래 끝에 맞춰 왼쪽 아래 빈칸을 없앤다 */
.bpp-res > .v2-label{display:block;margin-bottom:8px}
.bpp-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;font-family:var(--sans);font-weight:800;font-size:40px;line-height:1.08;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.bpp-big .q{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap}
.bpp-big .q b{font-weight:800}
.bpp-big .q small{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0;color:var(--muted)}
.bpp-big .eq{font-weight:400;color:var(--muted)}
.bpp-big.is-long{font-size:30px}
.bpp-big.is-xlong{font-size:22px}
.bpp-big.is-xlong .q{white-space:normal;overflow-wrap:anywhere}
.bpp-big.is-empty{font-size:22px;font-weight:600;color:var(--muted);opacity:.6}
.bpp-step{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink)}
.bpp-step::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--accent);vertical-align:1px}
.bpp-say{margin-top:10px}
.bpp-rows{align-self:start;min-width:0}
.bpp-rows li:first-child{border-top:0;padding-top:2px}
.bpp-rows li.sum b{color:var(--accent)}
.bpp-int{flex-wrap:wrap}
.bpp-ib{flex:1 0 100%;display:grid;gap:5px;margin-top:2px}
.bpp-ib p{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,auto);align-items:center;gap:8px;margin:0}
.bpp-ib i{display:flex;height:8px;border-radius:2px;background:var(--soft);overflow:hidden}
.bpp-ib s,.bpp-ib u{display:block;width:0;height:100%;text-decoration:none}
.bpp-ib s{background:var(--fill)}
.bpp-ib u.up{background:var(--accent)}
.bpp-ib u.down{background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--accent)}
.bpp-ib small{font-family:var(--sans);font-size:11.5px;color:var(--muted);white-space:nowrap}
.bpp-ib b{font-family:var(--sans);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;color:var(--ink);white-space:nowrap;text-align:right}
.bpp-work.is-anim .bpp-ib s,.bpp-work.is-anim .bpp-ib u{transition:width 320ms ease}

.bpp-in{display:grid;gap:12px;padding:14px 18px 12px}
.bpp-eq{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:0 8px;align-items:end}
.bpp-eqs{display:grid;place-items:center;height:var(--v2-ctl);font-family:var(--sans);font-size:18px;font-weight:700;color:var(--muted)}
.bpp-chips{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
.bpp-chips .v2-seg button{min-width:46px;font-variant-numeric:tabular-nums lining-nums}
.bpp-rates{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1.3fr);gap:0 8px;align-items:end}
.bpp-rates .bpp-amt{margin-left:14px}
.bpp-st:empty{display:none}

.bpp-plate{padding:12px 18px 14px;border-top:1px solid var(--soft)}
.bpp-cap{display:flex;justify-content:space-between;align-items:baseline;gap:2px 12px;flex-wrap:wrap;margin:0 0 9px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.bpp-cap b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.bpp-grid{display:grid;grid-template-columns:repeat(25,minmax(0,1fr)) auto;gap:3px;align-items:center;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;border-radius:var(--radius);outline:0}
.bpp-grid:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.bpp-grid i{position:relative;aspect-ratio:1;border-radius:2px;background:var(--soft);overflow:hidden}
.bpp-grid i:nth-of-type(5n){box-shadow:3px 0 0 -1px var(--card)} /* 다섯 칸마다 틈을 조금 넓혀 세기 쉽게 */
.bpp-grid i::after{content:"";position:absolute;inset:0;background:var(--fill);transform-origin:left center;transform:scaleX(var(--p,0))}
.bpp-grid.is-neg i::after{background:repeating-linear-gradient(135deg,var(--fill) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px var(--fill)}
.bpp-work.is-anim .bpp-grid i::after{transition:transform 160ms ease calc(var(--d) * 4ms)}
.bpp-grid em{padding-left:7px;font-style:normal;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.bpp-hint{margin:8px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}

.bpp-foot{margin:0;padding:10px 18px 0;border-top:1px solid var(--soft);font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted)}
.bpp-foot a{color:var(--ink);text-underline-offset:2px}
.bpp-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:10px 18px 14px}
.bpp-acts .v2-status{margin-left:auto}

@container bpp (max-width:700px){
  .bpp-head{grid-template-columns:minmax(0,1fr)}
  .bpp-rows{margin-top:14px}
  .bpp-rows li:first-child{border-top:1px solid var(--soft);padding-top:8px}
  .bpp-rates{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .bpp-rates .bpp-amt{grid-column:1 / -1;margin:12px 0 0}
}
@container bpp (max-width:520px){
  .bpp-head,.bpp-in,.bpp-plate{padding-left:14px;padding-right:14px}
  .bpp-foot{padding-left:14px;padding-right:14px}
  .bpp-acts{padding-left:14px;padding-right:14px}
  .bpp-eq{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .bpp-eq .bpp-eqs{display:none}
  .bpp-eq .v2-f:last-child{grid-column:1 / -1}
  .bpp-big{font-size:32px}
  .bpp-big.is-long{font-size:26px}
  .bpp-big.is-xlong{font-size:20px}
  .bpp-grid{gap:2px}
  .bpp-grid em{padding-left:5px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){ .bpp-grid i::after,.bpp-ib s,.bpp-ib u{transition:none!important} }