:root {
    /* --primary: #00A876;
    --primary-hover: #0cc28c;
    --secandary: #f4fffa; */

    /* --primary: #ff9d00;
    --primary-hover: #ffba4c;
    --secandary: #fffaf1; */

    /* --primary: #207FFC;
    --primary-hover: #4A98FF;
    --secandary: #f3f9ff; */

    /* --primary: #814cff;
    --primary-hover: #996eff;
    --secandary: #f2edff; */

    /* --primary: #ff4e48;
    --primary-hover: #ff6b66;
    --secandary: #fff4f4; */

    /* Text */
    --semo-inst-calc-text-dark: #1D2939;
    --semo-inst-calc-text-muted: #98a2b3;
    --semo-inst-calc-text-label: #6b7280;
    --semo-inst-calc-text-subtle: #7b8fa6;
    --semo-inst-calc-text-readonly: #8a96a8;
    --semo-inst-calc-text-result: #545454;
    --semo-inst-calc-text-block-title: #333333;
    --semo-inst-calc-text-heading: #111827;

    /* Border */
    --semo-inst-calc-border: #E4E7EC;
    --semo-inst-calc-border-input: #dde3ee;
    --semo-inst-calc-border-result: #e5e8eb;
    --semo-inst-calc-border-cta: #e5e7eb;
    --semo-inst-calc-border-readonly: #e4eaf4;
    --semo-inst-calc-border-radio-active: #666666;
    --semo-inst-calc-border-focus: #475569;

    /* Background */
    --semo-inst-calc-bg-page: #F9FAFB;
    --semo-inst-calc-bg-input: #f8fafc;
    --semo-inst-calc-bg-readonly: #f5f7fa;
    --semo-inst-calc-bg-badge: #f0f4f8;
    --semo-inst-calc-bg-radio-active: #f1f5f9;

    /* Accent */
    --semo-inst-calc-icon-accent: #2B66F6;

    /* Etc */
    --semo-inst-calc-focus-shadow: rgba(71, 85, 105, 0.08);
    --semo-inst-calc-result-text-rgb: 84, 84, 84;

    /* Button */
    --semo-inst-calc-btn-recalc-border: #d1d5db;
    --semo-inst-calc-btn-recalc-color: #4b5563;
    --semo-inst-calc-btn-recalc-border-hover: #9ca3af;
    --semo-inst-calc-btn-recalc-bg-hover: #f9fafb;

    /* CTA Gradient */
    --semo-inst-calc-cta-gradient-1: #2563eb;
    --semo-inst-calc-cta-gradient-2: #6366f1;
    --semo-inst-calc-cta-gradient-3: #06b6d4;
    --semo-inst-calc-cta-text: #ffffff;
    --semo-inst-calc-cta-text-muted: rgba(255, 255, 255, 0.9);
    --semo-inst-calc-cta-icon-bg: rgba(255, 255, 255, 0.2);
    --semo-inst-calc-cta-btn-bg: rgba(255, 255, 255, 0.28);
    --semo-inst-calc-cta-btn-bg-hover: rgba(255, 255, 255, 0.25);
    --semo-inst-calc-cta-btn-border: rgba(255, 255, 255, 0.4);
    --semo-inst-calc-cta-btn-border-hover: rgba(255, 255, 255, 0.6);
    --semo-inst-calc-cta-shadow: rgba(0, 0, 0, 0.15);
}

/* ===== calculate Page ===== */
.wrapper {min-height: 100vh; display: flex; flex-direction: column;}
.container {flex: 1; display: flex; flex-direction: column;}
.calcContainer {flex: 1; display: flex; flex-direction: column; width: 100%;}
/* .calcContainer .calcTop {border-bottom: 1px solid var(--semo-inst-calc-border);} */
/* .calcContainer .inner {max-width: 112rem; width: 100%; margin: 0 auto; padding: 12rem 2rem 6rem;} */
.calcContainer .inner {max-width: 112rem; width: 100%; margin: 0 auto; padding: 12rem 2rem 4rem;}
.calcContainer .inner .areaTxt {text-align: center;}
.calcContainer .inner .areaTxt .pointLabel {display: block; margin-bottom: 1.4rem;}
.calcContainer .inner .areaTxt .sectionTit {margin-bottom: 1.6rem;}

/* .calcTabsContainer {flex: 1; background: #fff; width: 100%;} */
/* .calcTabsContainer .calcTabsInner {max-width: 112rem; width: 100%; margin: 0 auto; background: var(--semo-inst-calc-bg-page);} */
.calcTabsContainer {flex: 1; background: var(--semo-inst-calc-bg-page); width: 100%;}
.calcTabsContainer .calcTabsInner {width: 42rem; margin: 0 auto;}

/* 맨 처음 시안 */
/* .calcTabsWrap {background: #fff; border-bottom: 1px solid var(--semo-inst-calc-border); width: 100%; display: flex; align-items: center; justify-content: center;}
.calcTabs {display: flex; gap: 1.6rem;}
.calcTabBtn {padding: 1.6rem 2.4rem; border: none; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; background: none; cursor: pointer; font-size: 1.5rem; font-weight: 600; color: var(--semo-inst-calc-text-muted); transition: all 0.2s; min-width: 12rem; text-align: center;}
.calcTabBtn:hover {color: var(--semo-inst-calc-text-dark); border-bottom-color: var(--semo-inst-calc-text-dark);}
.calcTabBtn.active {color: var(--semo-inst-calc-text-dark); border-bottom-color: var(--semo-inst-calc-text-dark);} */

/* 변경 시안 */
.calcContainer .calcTop .areaTxt {margin-bottom: 3rem;}
.calcTabsWrap {background: transparent; width: 100%; display: flex; align-items: center; justify-content: center;}
.calcTabs {display: flex; gap: 0.6rem; background-color: #f1f5f9; padding: 0.6rem; border-radius: 9.9rem;}
.calcTabBtn {padding: 1.2rem 3.2rem; border: none; background: transparent; cursor: pointer; font-size: 1.6rem; font-weight: 600; color: var(--semo-inst-calc-text-label); transition: all 0.2s; text-align: center; border-radius: 9.9rem;}
.calcTabBtn:hover {color: var(--semo-inst-calc-text-dark); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); background: #fff; transition: all 0.2s;}
.calcTabBtn.active {color: var(--semo-inst-calc-text-dark); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); background: #fff; transition: all 0.2s;}

.calcLayoutWrap {display: flex; align-items: flex-start; gap: 2rem; max-width: 112rem; margin: 0 auto; padding: 4rem 2rem;}
.calcLayoutWrap > .calcTabsResultInner {flex: 1;}
.calcLayoutSection {background: #fff; border-radius: 1.2rem; padding: 2.4rem; border: 1px solid var(--semo-inst-calc-border); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; align-items: stretch; align-self: stretch;}
.calcLayoutSection.result {flex: 1;}

.calcTabContent {display: none; flex-direction: column; gap: 2.4rem;}
.calcTabContent.active {display: flex;}
/* .formCard {background: #fff; border-radius: 1.2rem; padding: 2.4rem; border: 1px solid var(--semo-inst-calc-border); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05); height: 100%;} */
.formCardSection {margin-bottom: 2rem; border-bottom: 1px solid var(--semo-inst-calc-border); padding-bottom: 2rem;}
.formCardSection:last-child {border-bottom: 0; padding-bottom: 0;}
.sectionTitle {display: flex; align-items: center; gap: 0.8rem; font-size: 1.5rem; font-weight: 700; color: var(--semo-inst-calc-text-dark); margin: 0 0 2rem; padding: 0; border: none;}
.titleBadge {font-size: 1.1rem; font-weight: 500; color: var(--semo-inst-calc-text-subtle); background: var(--semo-inst-calc-bg-badge); padding: 0.3rem 0.8rem; border-radius: 10rem; display: inline-flex; align-items: center; justify-content: center;}

/* 실시간 분석 로딩 */
.loadingAnalyze {display: none; flex-direction: column; align-items: center; justify-content: center; padding: 7rem 4rem; width: 100%; text-align: center;}
.loadingAnalyze.show {display: flex;}
.loadingAnalyzeIcon {width: 5.6rem; height: 5.6rem; background-color: #f1f5f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; color: #334155; animation: loadingAnalyzeSpin 1.5s linear infinite; flex-shrink: 0;}
@keyframes loadingAnalyzeSpin {100% {transform: rotate(360deg);}}
.loadingAnalyzeText {font-size: 1.5rem; font-weight: 700; color: #1e293b; margin-bottom: 2rem; min-height: 2rem;}
.loadingAnalyzeTrack {width: 100%; max-width: 28rem; height: 6px; background-color: #e2e8f0; border-radius: 99px; overflow: hidden; position: relative;}
.loadingAnalyzeFill {position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #334155, #64748b, #334155); background-size: 200% 100%; border-radius: 99px; animation: loadingAnalyzeGradient 2s linear infinite; transition: width 0.4s ease;}
@keyframes loadingAnalyzeGradient {0% {background-position: 100% 0;} 100% {background-position: -100% 0;}}
/* //실시간 분석 로딩 */

/* nodata */
.formResultNoData {padding: 7rem 4rem; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.formResultNoData .iconWrapper {width: 9.6rem; height: 9.6rem; background-color: var(--secandary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;}
.formResultNoData .title {font-size: 2rem; font-weight: 700; color: #1e293b; margin-bottom: 0.75rem;}
.formResultNoData .description {color: #64748b; line-height: 1.625; max-width: 28rem; font-size: 1.6rem; text-align: center;}
.formResultNoData .description strong {color: var(--primary); font-weight: 600;}
.formResultNoData .features {margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; color: #94a3b8;}
.formResultNoData .feature-item {display: flex; align-items: center; gap: 0.4rem; font-size: 1.4rem; line-height: 1.6rem;}
/* //nodata */

/* common */
.formGrid {display: grid; grid-template-columns: 1fr; gap: 1.2rem;}
.formGroup {display: flex; flex-direction: column; gap: 0.8rem;}
.formGroup.fullWidth {grid-column: 1 / -1;}
.formGroup > label {font-weight: 600; font-size: 1.3rem; color: var(--semo-inst-calc-text-label);}
.tooltipWrap {position: relative; display: inline-flex; align-items: center; margin-left: 0.4rem; vertical-align: middle;}
.tooltipIcon {width: 1.4rem; height: 1.4rem; cursor: help; display: block; flex-shrink: 0;}
.tooltipIcon.lg {width: 1.8rem; height: 1.8rem;}
.tooltipBubble {display: none; position: absolute; bottom: calc(100% + 0.8rem); left: 50%; transform: translateX(-50%); background: var(--semo-inst-calc-text-dark); color: #fff; font-size: 1.2rem; line-height: 1.6; padding: 0.8rem 1.2rem; border-radius: 0.8rem; width: max-content; max-width: 26rem; white-space: normal; z-index: 100; box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.15);}
.tooltipBubble::after {content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 0.5rem solid transparent; border-top-color: var(--semo-inst-calc-text-dark);}
.tooltipBubble ul {padding-left: 1.2rem;}
.tooltipBubble ul li {list-style-type: disc;}
.tooltipWrap:hover .tooltipBubble {display: block;}

input[type="text"], input[type="number"], input[type="date"], select {padding: 1.2rem 1.4rem; border: 1px solid var(--semo-inst-calc-border-input); border-radius: 0.8rem; font-size: 1.4rem; width: 100%; box-sizing: border-box; background-color: var(--semo-inst-calc-bg-input); color: var(--semo-inst-calc-text-dark); outline: none; transition: border-color 0.2s, box-shadow 0.2s; height: 4.5rem;}
input[type="text"] {text-align: right;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
input[type="number"] {text-align: right; -moz-appearance: textfield;}
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus {outline: none; border-color: var(--semo-inst-calc-border-focus); box-shadow: 0 0 0 0.4rem var(--semo-inst-calc-focus-shadow); background-color: #fff;}
input[readonly] {background: var(--semo-inst-calc-bg-readonly); border-color: var(--semo-inst-calc-border-readonly); color: var(--semo-inst-calc-text-readonly); cursor: not-allowed;}
input::placeholder {color: var(--semo-inst-calc-text-muted); font-weight: 400;}
.inputWrap {display: flex; align-items: center; border: 1px solid var(--semo-inst-calc-border-input); border-radius: 0.8rem; background: var(--semo-inst-calc-bg-input); height: 4.5rem; transition: border-color 0.2s, box-shadow 0.2s; overflow: hidden;}
.inputWrap:focus-within {border-color: var(--semo-inst-calc-border-focus); box-shadow: 0 0 0 0.4rem var(--semo-inst-calc-focus-shadow);}
.inputWrap:has(input[readonly]) {background: var(--semo-inst-calc-bg-readonly); border-color: var(--semo-inst-calc-border-readonly);}
.inputWrap input {flex: 1; border: none; background: transparent; padding: 0 0 0 1.4rem; height: 100%; outline: none; font-size: 1.4rem; color: var(--semo-inst-calc-text-dark); width: 0;}
.inputWrap input:focus {box-shadow: none; background: transparent;}
.inputWrap input[readonly] {color: var(--semo-inst-calc-text-readonly); cursor: not-allowed; background: transparent; border: none;}
.inputWrap .unit {padding-left: 0.6rem; padding-right: 1.4rem; font-size: 1.4rem; color: var(--semo-inst-calc-text-muted); white-space: nowrap; flex-shrink: 0; line-height: 1;}
.dateWrap {position: relative; width: 100%;}
.dateWrap .dateNative {width: 100%; cursor: pointer; text-align: left;}
/* flatpickr 스타일 오버라이드 */
.flatpickr-input[readonly] {background-color: var(--semo-inst-calc-bg-input); color: var(--semo-inst-calc-text-dark);}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {color: rgba(57, 57, 57, 0.2);}
.flatpickr-input.flatpickr-input.flatpickr-mobile ~ input.flatpickr-input,
input.flatpickr-input:not([type="hidden"]) {cursor: pointer;}
.flatpickr-calendar {font-family: inherit; font-size: 1.3rem; border-radius: 1.2rem; box-shadow: 0 0.8rem 2.4rem rgba(0,0,0,0.12);}
.flatpickr-day.selected, .flatpickr-day.selected:hover {background: var(--semo-inst-calc-border-focus); border-color: var(--semo-inst-calc-border-focus);}
.flatpickr-day:hover {background: var(--semo-inst-calc-bg-radio-active);}
select {background-image: url(../images/ico/ico_ts_down_gray.svg); background-repeat: no-repeat; background-position: calc(100% - 1.6rem); background-size: 1.6rem; cursor: pointer;}
.flatpickr-current-month input.cur-year {text-align: left;}
input:hover, select:hover {border-color: var(--semo-inst-calc-border-focus);}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px transparent inset; -webkit-text-fill-color: var(--semo-inst-calc-text-dark); background-color: transparent; transition: background-color 5000s ease-in-out 0s;
}

.radioGroup {display: flex; gap: 0.8rem; flex-wrap: wrap;}
.radioItem {display: flex; align-items: center; justify-content: center; flex: 1; padding: 1.1rem 1.6rem; border: 1.5px solid var(--semo-inst-calc-border-input); border-radius: 0.8rem; cursor: pointer; font-size: 1.4rem; font-weight: 500; color: var(--semo-inst-calc-text-label); transition: all 0.15s; text-align: center;}
.radioItem:has(input:checked) {border-color: var(--semo-inst-calc-border-radio-active); background: var(--semo-inst-calc-bg-radio-active); color: var(--semo-inst-calc-text-dark); font-weight: 600;}
.radioItem input[type="radio"] {display: none;}
.radioItem br {display: none;}

.conditional {display: none;}
.conditional.show {display: flex; flex-direction: column;}
.conditional.conditionalGap {gap: 1.2rem;}

.submitBtn {display: block; width: 100%; padding: 1.8rem; background: #334155; color: #fff; border: none; border-radius: 1rem; font-size: 1.6rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s;}
.submitBtn:hover {opacity: 0.8;}
.submitBtn:active {opacity: 1;}
/* common */

/* ===== calculate-result ===== */
.resultWrap {padding: 4rem 2rem;}
.resultTitle {font-size: 3.6rem; font-weight: 700; color: var(--semo-inst-calc-text-dark); margin-bottom: 2.4rem;}
.resultContent {display: none; flex-direction: column;}
.resultContent.active {display: flex;}
.resultSection {padding-bottom: 3rem;}
.resultBlock {background: #fff; display: flex; flex-direction: column; gap: 1.2rem; border-bottom: 1px solid var(--semo-inst-calc-border); padding-bottom: 3rem;}
.resultSection:last-child .resultBlock {border-bottom: 0;}
.resultBlockTitle {font-size: 2rem; font-weight: 600; color: var(--semo-inst-calc-text-block-title);}
.resultRow {display: flex; justify-content: space-between; align-items: center; gap: 1.6rem;}
.resultLabel {font-size: 1.8rem; font-weight: 500; color: rgba(var(--semo-inst-calc-result-text-rgb), 0.9); flex: 1; line-height: 1.5;}
.resultValue {font-size: 1.8rem; font-weight: 600; color: var(--primary); text-align: right; white-space: nowrap;}
.resultRow.sub .resultLabel {font-size: 1.6rem; font-weight: 500; color: rgba(var(--semo-inst-calc-result-text-rgb), 0.9);}
.resultRow.sub .resultValue {font-size: 1.6rem; font-weight: 600; color: rgba(var(--semo-inst-calc-result-text-rgb), 0.9);}
.resultRow.sub2 {padding-left: 1rem;}
.resultRow.sub2 .resultLabel {font-size: 1.4rem; font-weight: 500; color: rgba(var(--semo-inst-calc-result-text-rgb), 0.8);}
.resultRow.sub2 .resultValue {font-size: 1.4rem; font-weight: 600; color: rgba(var(--semo-inst-calc-result-text-rgb), 0.8);}
.resultRow.subtotal {border-top: 1px solid var(--semo-inst-calc-border-result) !important; margin-top: 0.4rem; padding-top: 1.2rem;}
.resultRow.subtotal .resultLabel {font-size: 2.2rem; font-weight: 600; color: var(--semo-inst-calc-text-result);}
.resultRow.subtotal .resultValue {font-size: 2.2rem; font-weight: 600; color: var(--primary);}
.resultRow.total {border-top: 1.5px solid var(--semo-inst-calc-border-result) !important; margin-top: 0.8rem; padding-top: 0.8rem;}
.resultRow.total .resultLabel {font-size: 2.2rem; font-weight: 600; color: var(--semo-inst-calc-text-result);}
.resultRow.total .resultValue {font-size: 3.2rem; font-weight: 700; color: var(--primary);}
.resultDisclaimer {font-size: 1.4rem; color: rgba(var(--semo-inst-calc-result-text-rgb), 0.5); margin-top: 0.4rem; font-weight: 700; padding: 0 3rem; text-align: center;}

.consultBanner {background-color: var(--secandary); border: 1px solid var(--primary-hover); border-radius: 1.2rem; padding: 2.4rem; margin: 2.4rem 0; text-align: center;}
.consultBanner h3 {font-size: 1.8rem; color: var(--semo-inst-calc-text-dark); font-weight: 700; margin-bottom: 0.8rem;}
.consultBanner p {color: var(--semo-inst-calc-text-label); font-size: 1.3rem; line-height: 1.5; margin-bottom: 1.6rem;}
.consultBannerBtn {background: var(--primary); color: #fff; padding: 1rem 2.4rem; border-radius: 0.8rem; border: none; font-size: 1.4rem; font-weight: 600; cursor: pointer; width: 100%; transition: 0.25s;}
.consultBannerBtn:hover {background: var(--primary-hover);}

.secondaryActionArea {text-align: center; margin-top: 5rem; margin-bottom: 2rem;}
.btnRecalculate {display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; background-color: #ffffff; color: var(--semo-inst-calc-btn-recalc-color); border: 1px solid var(--semo-inst-calc-btn-recalc-border); font-size: 1.5rem; font-weight: 600; padding: 1.2rem 2.4rem; border-radius: 0.8rem; cursor: pointer; transition: all 0.2s; text-decoration: none;}
.btnRecalculate:hover {background-color: var(--semo-inst-calc-btn-recalc-bg-hover); border-color: var(--semo-inst-calc-btn-recalc-border-hover); color: #111827;}

.resultCtaWrapper {box-sizing: border-box; max-width: 112rem; margin: 0 auto;}
.resultCtaCard {width: 100%; border-radius: 1.6rem; background: linear-gradient(-45deg, var(--semo-inst-calc-cta-gradient-1), var(--semo-inst-calc-cta-gradient-2), var(--semo-inst-calc-cta-gradient-3), var(--semo-inst-calc-cta-gradient-1)); background-size: 300% 300%; animation: gradient-move 8s ease infinite; color: var(--semo-inst-calc-cta-text); font-size: 2.4rem; font-weight: bold; padding: 4rem 3rem; position: relative; overflow: hidden; margin-top: 3rem;}
@keyframes gradient-move {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
.resultCtaContainer {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 4rem; position: relative; z-index: 10;}
.resultCtaContent {display: flex; align-items: flex-start; gap: 2rem; width: 100%;}
.resultCtaIconBox {display: flex; flex-shrink: 0; width: 4.8rem; height: 4.8rem; background-color: var(--semo-inst-calc-cta-icon-bg); backdrop-filter: blur(4px); border-radius: 50%; align-items: center; justify-content: center; margin-top: 0.4rem;}
.resultCtaText {text-align: left; width: 100%;}
.resultCtaText h3 {font-size: 2.4rem; font-weight: 700; color: var(--semo-inst-calc-cta-text); margin: 0 0 0.8rem 0; line-height: 1.4; word-break: keep-all;}
.resultCtaText p {font-size: 1.5rem; color: var(--semo-inst-calc-cta-text-muted); margin: 0; line-height: 1.6; word-break: keep-all;}
.resultCtaBrPc {display: block;}
.resultCtaAction {width: auto; flex-shrink: 0;}
.resultCtaBtn {display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.6rem 3.6rem; border-radius: 999rem; border: 1px solid var(--semo-inst-calc-cta-btn-border); cursor: pointer; font-weight: 700; font-size: 1.6rem; color: var(--semo-inst-calc-cta-text); background: var(--semo-inst-calc-cta-btn-bg); backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none;}
.resultCtaBtn:hover {background: var(--semo-inst-calc-cta-btn-bg-hover); transform: translateY(-3px) scale(1.02); box-shadow: 0 1.2rem 2rem var(--semo-inst-calc-cta-shadow); border-color: var(--semo-inst-calc-cta-btn-border-hover);}
.resultCtaBtn:active {transform: translateY(0) scale(0.98);}

.resultSubActionWrapper {text-align: center; margin-top: 6rem; margin-bottom: 8rem; padding: 0 2rem;}
.btn-recalculate {display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; background-color: #ffffff; color: var(--semo-inst-calc-btn-recalc-color); border: 1px solid var(--semo-inst-calc-btn-recalc-border); font-size: 1.4rem; font-weight: 500; padding: 1.2rem 2.4rem; border-radius: 0.8rem; cursor: pointer; transition: all 0.2s; text-decoration: none;}
.btn-recalculate:hover {background-color: var(--semo-inst-calc-btn-recalc-bg-hover); color: var(--semo-inst-calc-text-heading); border-color: var(--semo-inst-calc-btn-recalc-border-hover);}

@media (max-width: 1024px) { 
    .resultCtaBrPc {display: none;}
    .calcLayoutWrap {flex-direction: column;}
    .formResultNoData {padding: 0 2rem 2rem;}
}

@media (max-width: 768px) {
    input[type="text"], input[type="number"], input[type="date"], select {font-size: 1.6rem;}
    .calcTabsContainer .calcTabsInner {width: 100%;}
    .calcContainer .inner {padding: 10rem 2rem 4rem;}
    .calcTabsContainer {min-width: 32rem;}
    .calcLayoutSection {padding: 1.6rem;}
    /* .calcTabs {padding: 0 2rem; width: 100%; gap: 0;} */
    .calcTabs {width: 100%; gap: 0;}
    .calcTabBtn {font-size: 1.4rem; padding: 1.4rem 0.8rem; text-align: center; min-width: auto; flex: 1; white-space: nowrap;}
    /* .calcTabContent {padding: 1.6rem 2rem 2.4rem;} */
    /* .formCard {padding: 2rem 1.8rem; border-radius: 1rem;} */
    .formGrid {grid-template-columns: 1fr;}
    .formGroup.fullWidth .radioGroup {gap: 0.8rem;}
    .radioItem br {display: block;}
    .tooltipBubble {max-width: 20rem;}

    /* ===== calculate-result ===== */
    .resultWrap {padding: 1.6rem 2rem 2.4rem;}
    .resultSection {padding-bottom: 1.6rem;}
    .resultBlock {padding: 0;}
    .resultTitle {font-size: 2.2rem;}
    .resultBlockTitle {font-size: 1.8rem;}
    .resultLabel {font-size: 1.5rem;}
    .resultValue {font-size: 1.5rem;}
    .resultRow.sub .resultLabel {font-size: 1.2rem;}
    .resultRow.sub .resultValue {font-size: 1.2rem;}
    .resultRow.sub2 .resultLabel {font-size: 1.2rem;}
    .resultRow.sub2 .resultValue {font-size: 1.2rem;}
    .resultRow.subtotal .resultLabel {font-size: 1.6rem;}
    .resultRow.subtotal .resultValue {font-size: 1.6rem;}
    .resultRow.total .resultLabel {font-size: 1.6rem;}
    .resultRow.total .resultValue {font-size: 2rem;}

    .resultCtaCard {padding: 3.2rem 2.4rem;}
    .resultCtaContainer {flex-direction: column; gap: 2.8rem;}
    .resultCtaText {text-align: center;}
    .resultCtaText h3 {font-size: 2rem;}
    .resultCtaText p {font-size: 1.4rem;}
    .resultCtaIconBox {display: none;}
    .resultCtaAction {width: 100%;}
    .resultCtaBtn {width: 100%;}
}