/* A finite, scroll-triggered cost story. All amounts remain readable without JS. */
.price-playground.price-breakdown{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(125deg,#fffaf0 0%,#fffdf8 65%,#fff0dc 100%);border-radius:0 64px 0 0;padding:36px 40px}
.price-playground::before,.price-playground::after{content:'';position:absolute;pointer-events:none;z-index:-1;border:1px solid #f6d9ac;border-radius:50%;width:270px;height:270px;right:-95px;top:-145px}
.price-playground::after{width:310px;height:310px;right:-115px;top:-165px;opacity:.5}
.price-playground .price-heading{margin-bottom:24px}
.cost-stage-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.cost-story-label{font-size:14px;font-weight:700;letter-spacing:.07em}
.cost-replay{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:#537079;padding:8px 0 8px 12px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.cost-replay>span{display:inline-block!important;font-size:20px!important;line-height:1}
.cost-replay:hover>span{transform:rotate(-90deg);transition:transform .25s}
.cost-replay:focus-visible{outline:2px solid #f56300;outline-offset:5px;border-radius:4px}
.price-playground .price-equation{gap:10px;grid-template-columns:1fr 16px 1fr 16px 1fr 16px 1.3fr;align-items:stretch}
.price-playground .price-step{position:relative;padding:58px 16px 20px;background:#fff;border:1px solid #e7e4dc;border-radius:16px;box-shadow:0 7px 0 #f1e9db;transition:transform .5s cubic-bezier(.22,.7,.3,1),border-color .5s,box-shadow .5s}
.price-playground .price-step strong{font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price-playground .price-step>span:not(.cost-index){font-size:12px}
.price-playground .price-step .cost-index{position:absolute;top:15px;left:16px;display:grid;place-items:center;border-radius:50%;width:28px;height:28px;background:#fff0da;color:#bf5100;font-size:12px;font-weight:700;line-height:1}
.price-playground .price-symbol{align-self:center}
.price-playground .price-result{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;background:#ff6500;color:#fff;border:1px solid #ff6500;box-shadow:0 7px 0 #e6b777;border-radius:20px;transform:rotate(-2deg);padding:24px 12px;transition:transform .6s cubic-bezier(.2,1.5,.5,1)}
.price-playground .price-result strong{color:#fff;font-size:40px;font-variant-numeric:tabular-nums}
.price-playground .price-result .cost-live-value{display:inline;color:inherit;font:inherit}
.price-playground .price-result>span{color:inherit;font-size:12px}
.price-playground .price-result .cost-result-note{font-size:10px;margin-top:6px;letter-spacing:.03em}
.price-playground .price-allocation{margin-top:32px;height:32px;border-radius:16px;transform-origin:left;transition:clip-path .9s cubic-bezier(.22,.61,.36,1)}
.price-playground .price-conditions{margin-top:20px}
.cost-sparks{position:absolute;inset:0;pointer-events:none}
.cost-sparks i{position:absolute;left:50%;top:50%;width:8px;height:8px;background:#ffbd45;border-radius:2px;opacity:0;--x:-110px;--y:-95px}
.cost-sparks i:nth-child(2){--x:80px;--y:-100px;background:#80cbd1;border-radius:50%}
.cost-sparks i:nth-child(3){--x:120px;--y:20px;background:#ff6500}
.cost-sparks i:nth-child(4){--x:-90px;--y:100px;background:#80cbd1}
.cost-sparks i:nth-child(5){--x:55px;--y:100px;border-radius:50%}
.cost-sparks i:nth-child(6){--x:-125px;--y:-20px;background:#ff6500}
.price-playground[data-cost-phase='1'] .cost-step-1,.price-playground[data-cost-phase='2'] .cost-step-2,.price-playground[data-cost-phase='3'] .cost-step-3{transform:translateY(-7px) rotate(-1.5deg);border-color:#ff9e39;box-shadow:0 12px 0 #f5ddba}
.price-playground[data-cost-phase='1'] .price-result,.price-playground[data-cost-phase='2'] .price-result{transform:rotate(0);background:#375e67;border-color:#375e67}
.price-playground[data-cost-phase='done'] .price-result{animation:cost-land .65s cubic-bezier(.2,.8,.2,1) both}
.price-playground[data-cost-phase='done'] .cost-sparks i{animation:cost-spark .85s ease-out both}
@keyframes cost-land{0%{transform:scale(.96) rotate(0)}45%{transform:scale(1.055) rotate(-3deg)}100%{transform:scale(1) rotate(-2deg)}}
@keyframes cost-spark{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(120deg) scale(.7)}}
@media(max-width:1100px) and (min-width:781px){.price-playground.price-breakdown{padding:28px 24px}.price-playground .price-step{padding-inline:10px}.price-playground .price-step strong{font-size:23px}.price-playground .price-result strong{font-size:32px}.price-playground .price-result>span{font-size:11px}}
@media(max-width:780px){
 .price-playground.price-breakdown{padding:24px 20px;border-radius:0 40px 0 0}.cost-story-label{font-size:12px}.cost-replay{font-size:11px;gap:4px}.cost-stage-heading{gap:8px;margin-top:24px}
 .price-playground .price-equation{grid-template-columns:1fr;gap:10px}.price-playground .price-step{padding:16px 12px 16px 46px;min-height:76px;gap:8px;box-shadow:0 4px 0 #f1e9db}.price-playground .price-step .cost-index{top:23px;left:10px;width:25px;height:25px;font-size:10px}
 .price-playground .price-step strong{font-size:25px}.price-playground .price-step>span:not(.cost-index){font-size:11px;max-width:88px}.price-playground .price-step em{font-size:17px}
 .price-playground .price-symbol{height:12px;line-height:12px;font-size:18px}.price-playground .price-result{margin-top:8px;padding:18px 12px;gap:3px}.price-playground .price-result strong{font-size:44px}.price-playground .price-allocation{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.price-playground *{animation:none!important;transition:none!important}.price-playground .price-allocation{clip-path:none!important}.cost-replay{display:none}.price-playground .price-step{transform:none!important}}
@media(max-width:780px){
 .cost-story-label{font-size:11px;letter-spacing:0;white-space:nowrap}.cost-replay{flex-shrink:0;padding-left:0}
 .price-playground .price-step strong{font-size:22px}
 .price-playground .price-step>span:not(.cost-index){max-width:none;font-size:11px}
}
/* Compact cards and a shrinking cost bar over the original 100% dotted outline. */
.price-playground .price-step{padding:42px 16px 14px;box-shadow:0 4px 0 #f1e9db;min-height:0}
.price-playground .price-step .cost-index{top:10px;left:16px;width:23px;height:23px;font-size:11px}
.price-playground .price-step>span:not(.cost-index){font-size:14px;line-height:1.5;white-space:nowrap}
.price-playground .price-step strong{font-size:34px;margin-top:7px;line-height:1.3}
.price-playground .price-result{padding:15px 12px;gap:3px;box-shadow:0 4px 0 #e6b777}
.price-playground .price-result strong{font-size:46px;line-height:1.2}
.price-playground .price-result>span{font-size:13px}
.price-playground .price-result .cost-result-note{display:none}
.cost-cut-chart{--remaining:.15909;margin:30px 0 20px}
.cost-cut-labels{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:10px;font-size:14px}
.cost-cut-labels strong{font-size:16px;color:#dd5500}
.cost-cut-labels span{font-size:13px;color:#6c8086}
.cost-cut-track{position:relative;height:32px;border:2px dashed #d1b48e;border-radius:8px;background:transparent;overflow:hidden}
.cost-cut-fill{position:absolute;inset:-2px;background:#ff6500;transform:scaleX(var(--remaining));transform-origin:left;border-radius:7px}
.cost-cut-legend{display:flex;align-items:center;gap:22px;margin-top:12px;font-size:13px;color:#526b72}
.cost-cut-legend>span{display:inline-flex;align-items:center;gap:7px}
.cost-cut-legend i{display:inline-block;width:16px;height:12px;border-radius:2px;background:#ff6500}
.cost-cut-legend>span:nth-child(2) i{background:transparent;border:1px dashed #ba9464}
.cost-cut-legend strong{margin-left:auto;font-size:15px;color:#de5900}
@media(min-width:781px) and (max-width:1100px){.price-playground .price-step{padding-inline:10px}.price-playground .price-step strong{font-size:29px}.price-playground .price-step>span:not(.cost-index){font-size:12px}.price-playground .price-result strong{font-size:38px}}
@media(max-width:780px){
 .price-playground .price-step{padding:15px 12px 15px 43px;min-height:70px}
 .price-playground .price-step .cost-index{left:10px;top:23px;width:23px;height:23px}
 .price-playground .price-step strong{font-size:25px;margin:0}
 .price-playground .price-step>span:not(.cost-index){font-size:12px;white-space:normal}
 .price-playground .price-step.cost-step-3>span:not(.cost-index){max-width:95px}
 .price-playground .price-result strong{font-size:46px}
 .cost-cut-labels{gap:8px}.cost-cut-labels strong{font-size:14px}.cost-cut-labels span{font-size:11px}
 .cost-cut-legend{gap:10px;flex-wrap:wrap;font-size:11px}.cost-cut-legend strong{font-size:13px}
}
@media(min-width:781px){.price-playground .price-step>span:not(.cost-index){height:32px;display:flex;align-items:center;gap:4px}.price-playground .price-step{padding-top:36px;padding-bottom:12px}}
/* Labels occupy the exact portions removed, in the order of the calculation. */
.cost-cut-track{height:48px;overflow:visible}
.cost-cut-track .cost-cut-fill{inset:0}
.cost-cut-track>span{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:700;color:#85623b;pointer-events:none;transition:opacity .35s ease}
.cost-cut-track>.cost-cut-tax{left:15.909%;width:9.091%;flex-direction:column;gap:0;font-size:11px;line-height:1.45;border-right:1px dashed #c8ac88;color:#466b72}
.cost-cut-track>.cost-cut-subsidy{left:25%;width:75%}
.cost-cut-track>span>span{font:inherit;color:inherit}
.price-playground[data-cost-phase='1'] .cost-cut-track>span{opacity:0}
.price-playground[data-cost-phase='2'] .cost-cut-tax{opacity:0}
.price-playground[data-cost-phase='2'] .cost-cut-subsidy,.price-playground[data-cost-phase='3'] .cost-cut-tax{transition-delay:.75s}
@media(max-width:780px){
 .cost-cut-chart{margin-bottom:40px}
 .cost-cut-track{height:42px}
 .cost-cut-track>.cost-cut-subsidy{font-size:12px;gap:4px}
 .cost-cut-track>.cost-cut-tax{font-size:10px;color:transparent}
 .cost-cut-track>.cost-cut-tax>span{color:transparent}
 .cost-cut-track>.cost-cut-tax::before{content:'';position:absolute;left:50%;top:100%;height:13px;border-left:1px solid #72949a}
 .cost-cut-track>.cost-cut-tax::after{content:'消費税控除 約9.1％';position:absolute;top:calc(100% + 15px);left:50%;transform:translateX(-50%);white-space:nowrap;color:#466b72;font-size:11px}
 .cost-cut-legend{margin-top:45px}
}