/* V4.3: mobile inline cost summary only; desktop and continuous cost composition retained. */
.metric-number,.cost-tab-cards strong,.section-total,.row-price{font-variant-numeric:tabular-nums;white-space:nowrap}
.amount-value{display:inline-block;white-space:nowrap}.amount-unit{font-size:10px;font-weight:500;margin-left:2px;letter-spacing:0}
.rail-final .metric-number{display:block;width:100%;min-width:0;white-space:nowrap}
.rail-final[data-preview]:before{content:'示例';display:block;text-align:center;font-size:9px;line-height:18px;color:#315b96;background:#ffffffa8}
#cost-drawer{height:min(714px,calc(var(--app-h) - 72px))!important;max-height:calc(var(--app-h) - 72px);width:640px;max-width:calc(100vw - 36px);overflow:hidden;inset:0;margin:auto;animation:costFromRight .36s cubic-bezier(.2,.75,.25,1) both}
#cost-drawer[open]{display:flex;flex-direction:column}
#cost-drawer::backdrop{animation:costShadeIn .3s ease both}
#cost-drawer.is-closing{animation:costToRight .22s ease-in both;pointer-events:none}
#cost-drawer.is-closing::backdrop{animation:costShadeOut .22s ease-in both}
#cost-drawer .cost-card-head{padding:23px 26px 10px;flex:none}
#cost-drawer .cost-context{padding-bottom:14px;flex:none}
#cost-drawer .cost-tab-cards{padding-bottom:16px;gap:10px;flex:none}
#cost-drawer .cost-tab-cards button{min-height:85px;min-width:0;padding:13px 14px}
#cost-drawer .cost-tab-cards button strong{display:block;width:100%;font-size:26px}
#cost-drawer .cost-tab-cards button[aria-current=true]{background:linear-gradient(145deg,#2252bc,#2a69d7 61%,#84b0ee);border-color:#6b9bdf;box-shadow:0 7px 20px #245bb22b,inset 0 1px 0 #b3d4ff4f;color:#eff6ff;transform:translateY(-2px)}
#cost-drawer .cost-tab-cards button[aria-current=true]>strong{color:white}
#cost-detail{display:block;position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#99b7de transparent;padding:0 26px 20px;scroll-behavior:auto;outline:none;overflow-anchor:none}
#cost-detail .cost-section{display:block;scroll-margin-top:0;padding:0;margin:0}
#cost-detail .cost-section+.cost-section{border-top:1px solid #b7ccef;margin-top:25px;padding-top:22px}
#cost-detail .composition-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(110deg,#deebff,#f6faff);border:1px solid #c1d6f5;border-radius:12px}
.section-heading-copy{min-width:0}.section-heading-copy h3{font-size:14px;color:#234f86;letter-spacing:0;margin:0 0 4px;font-weight:700}.section-heading-copy small{font-size:10px;color:#6580a4;display:block}
#cost-detail .section-total{font-size:20px;font-weight:750;color:#204d8e;line-height:1.4;flex:none;max-width:65%}
#cost-detail .section-total .amount-value{font-size:inherit;font-weight:inherit;color:inherit}
#cost-detail .section-total .pending-label{font-size:14px}.known-part{font-size:11px;color:#526f96;margin:7px 1px 10px;padding:0 4px;line-height:1.7}.known-part strong{font-weight:700;color:#224f85}
#cost-detail .component-list{display:block;max-height:none!important;min-height:0;overflow:visible;margin:10px 0 0;padding:0;flex:none}
#cost-detail .component-row{grid-template-columns:32px minmax(0,1fr) auto;min-height:64px;gap:11px;margin-bottom:8px}
#cost-detail .row-text{min-width:0}.row-text strong,.row-text small{overflow-wrap:anywhere}
#cost-detail .row-price{display:block;max-width:100%;font-size:15px;letter-spacing:-.025em}
#cost-detail .row-price.included{font-size:11px;letter-spacing:0}.row-price .amount-unit{font-size:9px}
#cost-detail .cost-section[data-cost-section=renewal] .composition-summary{background:linear-gradient(120deg,#e7eaff,#f6f8ff)}
#cost-detail .cost-section[data-cost-section=supplement] .composition-summary{background:#f1f4f8}.supplement-note{font-size:11px;margin:7px 3px;color:#5f7290}
#cost-drawer .cost-card-foot{margin-top:0;padding:11px 26px 15px;border-top:1px solid #cbdcf3;font-size:10px;flex:none;background:#eef5ff}
.cost-invalid{border:1px solid #d6a484;padding:16px;border-radius:12px;background:#fff5ec;color:#74451e;font-size:12px}
@keyframes costFromRight{from{opacity:0;transform:translateX(70px) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes costToRight{to{opacity:0;transform:translateX(55px) scale(.985)}}
@keyframes costFromBottom{from{opacity:0;transform:translateY(100px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes costToBottom{to{opacity:0;transform:translateY(85px) scale(.99)}}
@keyframes costShadeIn{from{opacity:0}to{opacity:1}}@keyframes costShadeOut{to{opacity:0}}
@media(max-width:700px){
 .nav-wrap{gap:12px;width:calc(100% - 32px);flex-wrap:nowrap}
 .site-header nav{flex:1;min-width:0;justify-content:space-evenly;gap:8px;margin:0;padding:0;height:100%}
 .site-header nav a{flex:none;display:flex;justify-content:center;align-items:center;min-height:44px;padding:0 6px;font-size:12px;white-space:nowrap}
 .site-header nav a.active:after{left:6px;right:6px;width:auto;bottom:15px}
 .utility-wrap{margin:0;flex:none}.nav-benefit{display:none!important}
 .convo-final .thread{padding:24px 18px 16px}
 .convo-final .composer-zone{padding-top:10px}
 .convo-final .rail-final,.steps-collapsed .convo-final .rail-final{position:relative;inset:auto;align-self:auto;width:100%;height:42px;max-height:none;min-height:42px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #91afd478;border-radius:11px;margin:0 0 8px;padding:0;overflow:hidden;flex:none;background:transparent;box-shadow:none;animation:none}
 .convo-final .rail-final .metric-cell{min-width:0;height:40px;min-height:0;width:100%;padding:0 8px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;border:0;border-right:1px solid #91afd44d;text-align:center;background:transparent}
 .convo-final .rail-final .metric-cell:last-of-type{border-right:0}
 .convo-final .rail-final .metric-number{flex:0 1 auto;width:auto;min-width:0;max-width:calc(100% - 45px);height:auto;font-size:17px;line-height:1.2;letter-spacing:-.025em;display:flex;align-items:baseline;justify-content:center;color:#2455d6;white-space:nowrap}
 .convo-final .rail-final .metric-number small{font-size:9px;line-height:1;margin-left:2px;color:#617993}
 .convo-final .rail-final .metric-number.is-unknown{font-size:13px;line-height:1.2;align-items:center;color:#926217;letter-spacing:0}
 .convo-final .rail-final .metric-label{order:-1;flex:none;display:block;font-size:10px;line-height:1.2;font-weight:500;letter-spacing:0;margin:0;color:#45607e;white-space:nowrap}
 .convo-final .rail-final .metric-label>span{display:inline}
 .convo-final .rail-final .metric-label:after{content:none}
 .convo-final .rail-final .rail-hint{display:none}
 .convo-final .rail-final[data-preview]:before{position:absolute;top:0;right:0;font-size:7px;line-height:12px;padding:0 5px;border-radius:0 0 0 6px;z-index:1}
 #cost-drawer{inset:auto 0 0;margin:0 auto 12px;width:calc(100vw - 24px);max-width:calc(100vw - 24px);height:min(710px,calc(var(--app-h) - 54px))!important;max-height:calc(var(--app-h) - 54px);border-radius:23px;animation:costFromBottom .38s cubic-bezier(.2,.76,.25,1) both}
 #cost-drawer.is-closing{animation:costToBottom .24s ease-in both}
 #cost-drawer .cost-card-head{padding:19px 18px 9px}
 #cost-drawer .cost-card-head h2{font-size:23px}
 #cost-drawer .cost-card-head .close-dialog{width:34px;height:34px}
 #cost-drawer .cost-context{padding:0 18px 12px;font-size:10px;gap:8px}
 #cost-drawer .cost-tab-cards{padding:0 17px 14px;gap:8px}
 #cost-drawer .cost-tab-cards button{padding:12px 10px;min-height:77px;border-radius:12px}
 #cost-drawer .cost-tab-cards button>span{font-size:10px}
 #cost-drawer .cost-tab-cards button>strong{font-size:24px;margin-top:7px}
 #cost-detail{padding:0 17px 16px}
 #cost-detail .composition-summary{padding:12px;gap:10px}
 .section-heading-copy h3{font-size:12px}.section-heading-copy small{font-size:9px}
 #cost-detail .section-total{font-size:19px;max-width:68%}
 #cost-detail .component-row{grid-template-columns:28px minmax(0,1fr) auto;gap:8px;padding:11px 10px;min-height:61px}
 #cost-detail .row-text strong{font-size:11px}#cost-detail .row-text small{font-size:9px}
 #cost-detail .row-price{font-size:14px}#cost-detail .row-price.included{font-size:10px}
 #cost-detail .cost-section+.cost-section{margin-top:21px;padding-top:19px}
 #cost-drawer .cost-card-foot{padding:10px 18px 13px;font-size:9px}
 .pay-card-final .payment-card{margin-top:20px}
}
@media(max-width:360px){
 .nav-wrap{width:calc(100% - 24px);gap:6px}.site-header nav{gap:2px}.site-header nav a{padding:0 4px;font-size:11px}.site-header nav a.active:after{left:4px;right:4px}
 .utility-toggle{width:28px;height:30px}.utility-wrap{margin:0}
 .convo-final .thread{padding:19px 14px 14px}
 .convo-final .rail-final,.steps-collapsed .convo-final .rail-final{height:40px;min-height:40px}
 .convo-final .rail-final .metric-cell{height:38px;padding:0 5px;gap:4px}
 .convo-final .rail-final .metric-number{font-size:16px;height:auto;max-width:calc(100% - 40px)}.convo-final .rail-final .metric-number.is-unknown{font-size:12px}.convo-final .rail-final .metric-label{font-size:9px}
 #cost-drawer .cost-card-head{padding-left:15px;padding-right:15px}
 #cost-drawer .cost-context{padding-left:15px;padding-right:15px}
 #cost-drawer .cost-tab-cards{padding-left:14px;padding-right:14px;gap:6px}
 #cost-drawer .cost-tab-cards button{padding:10px 8px}#cost-drawer .cost-tab-cards button>strong{font-size:21px}
 #cost-detail{padding-left:14px;padding-right:14px}
 #cost-detail .component-row{grid-template-columns:25px minmax(0,1fr) auto;gap:7px;padding:10px 8px}
 #cost-detail .row-icon{width:25px;height:25px}.known-part{font-size:10px}
}
@media(max-height:520px) and (max-width:700px){
 .convo-final .rail-final,.steps-collapsed .convo-final .rail-final{height:38px;min-height:38px;margin-bottom:6px}
 .convo-final .rail-final .metric-cell{height:36px;padding:0 5px;gap:4px}
 .convo-final .rail-final .metric-number{font-size:16px;height:auto}.convo-final .rail-final .metric-number.is-unknown{font-size:12px}
 .convo-final .composer-zone{padding-top:6px;padding-bottom:6px}
 #cost-drawer{height:calc(var(--app-h) - 28px)!important;max-height:calc(var(--app-h) - 28px);margin-bottom:8px}
 #cost-drawer .cost-card-head{padding-top:11px;padding-bottom:5px}#cost-drawer .cost-context{padding-bottom:7px}
 #cost-drawer .cost-tab-cards{padding-bottom:9px}#cost-drawer .cost-tab-cards button{min-height:62px;padding-top:8px;padding-bottom:8px}
 #cost-drawer .cost-card-foot{padding-top:7px;padding-bottom:8px}
}
@media(prefers-reduced-motion:reduce){#cost-drawer,#cost-drawer.is-closing,#cost-drawer::backdrop,#cost-drawer.is-closing::backdrop{animation:none!important;transition:none!important}}