/* 담당 카드: 섞기 전에는 숨김(.js 는 head 인라인 스크립트가 첫 페인트 전에 붙인다). JS 가 꺼져 있으면 .js 가 없어 그대로 보인다. 스크립트가 실패해도 1.5초 뒤 보인다. */
.js .staff-box:not([data-shuffled]) { visibility: hidden; animation: staff-reveal 0s 1.5s forwards; }
@keyframes staff-reveal { to { visibility: visible; } }

/* 버튼: 가격 섹션 맨 아래, 390 전체 폭 / 넓은 화면은 본문 열 폭, 높이 52 */
.calc-wrap { margin-top: 16px; }
.calc-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.calc-open[hidden] { display: none; }
.calc-ic { width: 20px; height: 20px; flex: none; }

/* 다이얼로그: 390 아래 시트(전체 폭, 최대 90dvh), 1024 이상 가운데 모달(폭 440) */
html.calc-lock { overflow: hidden; }
.calc-dlg { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 90vh; max-height: 90dvh; margin: 0; padding: 0; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); color: var(--ink); overflow: hidden; }
.calc-dlg[open] { display: flex; flex-direction: column; }
.calc-dlg::backdrop { background: rgba(26, 15, 46, .72); }
.calc-sheet { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.calc-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--line); touch-action: none; }
.calc-title { margin: 0; font-size: 18px; }
.calc-x { width: 44px; height: 44px; border: 0; background: none; color: inherit; font-size: 26px; cursor: pointer; }
.calc-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.calc-label { font-size: 13px; margin-bottom: 8px; }
.calc-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-segbtn { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: none; color: inherit; font: inherit; cursor: pointer; }
.calc-segbtn[aria-pressed="true"] { border-color: currentColor; font-weight: 800; box-shadow: inset 0 0 0 1px currentColor; }
.calc-step { display: inline-flex; align-items: center; gap: 12px; }
.calc-stepbtn { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: none; color: inherit; font-size: 22px; cursor: pointer; }
.calc-stepbtn:disabled { opacity: .35; cursor: default; }
.calc-n { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; }
/* 결과: 시트 아래쪽에 붙임(sticky bottom) */
.calc-result { position: sticky; bottom: 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.calc-rl { font-size: 13px; }
.calc-amount { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.calc-formula { font-size: 13px; opacity: .8; overflow-wrap: anywhere; }
.calc-note { font-size: 13px; opacity: .8; margin-top: 4px; }
.calc-asof { font-size: 12px; opacity: .65; margin-top: 6px; }
@media (min-width: 1024px) {
  .calc-dlg { inset: 0; margin: auto; width: 440px; max-width: calc(100% - 48px); max-height: min(90dvh, 720px); border-radius: var(--r-lg); }
}
@media (prefers-reduced-motion: no-preference) {
  .calc-dlg[open] { animation: calc-up .2s var(--ease); }
  @keyframes calc-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}