.smc-calculator { --smc-ink: #16223a; --smc-muted: #5d6879; --smc-line: #d9e0e8; --smc-brand: #233b7a; --smc-brand-dark: #172033; --smc-soft: #eef3fa; color: var(--smc-ink); background: #fff; border: 1px solid var(--smc-line); border-radius: 18px; box-shadow: 0 14px 40px rgba(22, 34, 58, .08); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 2rem auto; max-width: 920px; overflow: hidden; } .smc-calculator *, .smc-calculator *::before, .smc-calculator *::after { box-sizing: border-box; } .smc-calculator__header, .smc-form, .smc-results, .smc-disclaimer { padding: clamp(1.25rem, 4vw, 2.25rem); } .smc-calculator__header { padding-bottom: 1rem; } .smc-language, .smc-region { align-items: center; display: flex; float: right; gap: .55rem; margin: 0 0 .8rem 1rem; } .smc-language span, .smc-region span { color: var(--smc-muted); font-size: .85rem; font-weight: 750; } .smc-language select, .smc-region select { background: #fff; border: 1px solid #aeb9c6; border-radius: 9px; color: var(--smc-ink); font: inherit; min-height: 40px; padding: .4rem 2rem .4rem .65rem; } .smc-language + .smc-eyebrow { padding-top: .45rem; } .smc-calculator h2, .smc-calculator h3, .smc-calculator p { margin-top: 0; } .smc-calculator h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -.03em; line-height: 1.1; } .smc-calculator__header > p:last-child { color: var(--smc-muted); font-size: 1.05rem; max-width: 64ch; } .smc-eyebrow { color: var(--smc-brand); font-size: .76rem; font-weight: 800; letter-spacing: .12em; } .smc-grid { display: grid; gap: 1rem; } .smc-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .smc-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; } .smc-field { display: flex; flex-direction: column; gap: .45rem; } .smc-field > span { font-size: .95rem; font-weight: 700; } .smc-field--annual { margin-top: 1rem; max-width: calc(33.333% - .66rem); } .smc-field input, .smc-field select { appearance: none; background: #fff; border: 1px solid #aeb9c6; border-radius: 10px; color: var(--smc-ink); font: inherit; min-height: 52px; padding: .75rem .9rem; width: 100%; } .smc-field input:focus, .smc-field select:focus, .smc-button:focus-visible { outline: 3px solid rgba(23,107,85,.28); outline-offset: 2px; } .smc-button { background: var(--smc-brand); border: 0; border-radius: 10px; color: #fff; cursor: pointer; font: inherit; font-weight: 800; margin-top: .75rem; min-height: 54px; padding: .8rem 1.25rem; } .smc-button:hover { background: var(--smc-brand-dark); } .smc-error { color: #a12622; font-weight: 700; min-height: 1.5rem; margin: .75rem 0 0; } .smc-results { background: var(--smc-soft); border-block: 1px solid #cae5da; } .smc-results h3 { font-size: 1.25rem; } .smc-results__grid { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #c8ddd5; border: 1px solid #c8ddd5; border-radius: 12px; overflow: hidden; } .smc-results__grid > div { background: #fff; min-width: 0; padding: 1rem; } .smc-results__grid span { color: var(--smc-muted); display: block; font-size: .82rem; margin-bottom: .35rem; } .smc-results__grid strong { display: block; font-size: clamp(1.05rem, 2.5vw, 1.45rem); overflow-wrap: anywhere; } .smc-formula { color: var(--smc-muted); font-size: .9rem; margin: 1rem 0 0; } .smc-disclaimer { color: var(--smc-muted); font-size: .85rem; margin: 0 !important; } @media (max-width: 720px) { .smc-grid--three, .smc-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .smc-field--annual { max-width: 100%; } } @media (max-width: 480px) { .smc-grid--two, .smc-grid--three, .smc-results__grid { grid-template-columns: 1fr; } .smc-calculator { border-radius: 12px; margin-inline: 0; } .smc-language, .smc-region { float: none; justify-content: space-between; margin: 0 0 .7rem; } } @media (prefers-reduced-motion: reduce) { .smc-calculator * { scroll-behavior: auto !important; transition: none !important; } } .smc-guide { border-top: 1px solid #dce3ea; margin-top: 3rem; padding-top: 2rem; } .smc-guide h2 { color: #13243a; font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 2rem 0 .75rem; } .smc-guide h2:first-child { margin-top: 0; } .smc-guide p, .smc-guide li { color: #445268; line-height: 1.75; } .smc-guide ol { padding-left: 1.4rem; } .smc-faq { display: grid; gap: .75rem; } .smc-faq details { border: 1px solid #dce3ea; border-radius: 10px; padding: .9rem 1rem; } .smc-faq summary { color: #13243a; cursor: pointer; font-weight: 750; } .smc-faq details p { margin-bottom: 0; } .smc-related { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; list-style: none; padding: 0; } .smc-related a { color: #176b55; font-weight: 700; } .smc-guide__audience { background: #edf8f4; border-left: 4px solid #0b7a65; border-radius: 0 10px 10px 0; padding: .9rem 1rem; } .smc-example { background: linear-gradient(135deg, #f4faf7, #edf8f4); border: 1px solid #b9d9ce; border-radius: 14px; margin: 1.75rem 0; padding: 1.2rem 1.35rem; } .smc-example h2 { margin-top: 0; } .smc-example p { margin-bottom: 0; } .smc-actions { align-items: center; border-top: 1px solid #dce3ea; display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; padding-top: 1rem; } .smc-action { background: #fff; border: 1px solid #0b7a65; border-radius: 10px; color: #075447; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 750; padding: .7rem 1rem; } .smc-action:hover { background: #edf8f4; } .smc-action:focus-visible { outline: 3px solid rgba(11,122,101,.28); outline-offset: 2px; } .smc-action--print { background: #0b7a65; color: #fff; } .smc-action--print:hover { background: #075447; } .smc-action-status { color: #075447; font-size: .88rem; font-weight: 700; } .smc-print-header { display: none; } .smc-dealer-hero { background: linear-gradient(135deg, #075447, #0b7a65); border-radius: 20px; color: #fff; margin-bottom: 2rem; padding: clamp(1.5rem, 4vw, 2.8rem); } .smc-dealer-hero h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.65rem); margin: .35rem 0 .8rem; } .smc-dealer-hero p, .smc-dealer-hero li { color: #e5f6f0; } .smc-dealer-hero ul { display: grid; gap: .5rem; margin: 1.2rem 0 0; padding-left: 1.2rem; } .smc-dealer-form { background: #fff; border: 1px solid #dce3ea; border-radius: 18px; box-shadow: 0 16px 40px rgba(19,36,58,.08); padding: clamp(1.25rem, 4vw, 2.2rem); } .smc-dealer-form textarea { border: 1px solid #c9d2dc; border-radius: 10px; box-sizing: border-box; font: inherit; margin-top: .4rem; padding: .8rem; width: 100%; } .smc-feature-choices { border: 1px solid #dce3ea; border-radius: 12px; display: grid; gap: .65rem; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 1rem 0; padding: 1rem; } .smc-feature-choices legend { color: #13243a; font-weight: 800; padding: 0 .35rem; } .smc-feature-choices label, .smc-consent { color: #445268; } .smc-consent { display: block; line-height: 1.5; margin: 1rem 0; } .smc-form-notice { border-radius: 12px; margin: 1rem 0 2rem; padding: 1rem 1.1rem; } .smc-form-notice--success { background: #e6f7ef; border: 1px solid #8dcbb3; color: #075447; } .smc-form-notice--error { background: #fff1f0; border: 1px solid #efaaa5; color: #8a2520; } .smc-form-privacy { color: #687588; font-size: .85rem; margin-bottom: 0; } .smc-honeypot { height: 1px; left: -9999px; overflow: hidden; position: absolute; width: 1px; } @media (max-width: 640px) { .smc-feature-choices { grid-template-columns: 1fr; } } .smc-field { position: relative; } .smc-help-button { align-items: center; background: #edf7f3; border: 1px solid #9fc8ba; border-radius: 999px; color: #0e4f3e; cursor: pointer; display: inline-flex; font: inherit; font-size: .76rem; font-weight: 800; height: 1.35rem; justify-content: center; line-height: 1; margin-left: .25rem; padding: 0; vertical-align: middle; width: 1.35rem; } .smc-help-button:hover { background: #dcefe8; } .smc-help-button:focus-visible { outline: 3px solid rgba(23,107,85,.28); outline-offset: 2px; } @media print { @page { margin: 14mm; } body * { visibility: hidden !important; } .smc-calculator, .smc-calculator * { visibility: visible !important; } .smc-calculator { background: #fff !important; border: 0 !important; box-shadow: none !important; left: 0; margin: 0 !important; max-width: none !important; padding: 0 !important; position: absolute; top: 0; width: 100%; } .smc-print-header { align-items: center; border-bottom: 2px solid #0b7a65; display: flex !important; justify-content: space-between; margin-bottom: 1rem; padding-bottom: .65rem; } .smc-print-header strong { color: #075447; font-size: 1.1rem; } .smc-print-header span { color: #5b6878; font-size: .8rem; } .smc-actions, .smc-button, .smc-help-button, .smc-help-bubble, .smc-error { display: none !important; } .smc-form, .smc-results { break-inside: avoid; box-shadow: none !important; } .smc-field input, .smc-field select { background: #fff !important; border-color: #b8c2cc !important; color: #13243a !important; } } .smc-help-bubble { background: #13243a; border-radius: 10px; box-shadow: 0 10px 28px rgba(19,36,58,.2); color: #fff; font-size: .84rem; font-weight: 500; left: 0; line-height: 1.5; max-width: min(320px,calc(100vw - 3rem)); padding: .8rem .9rem; position: absolute; top: 2rem; width: max-content; z-index: 20; } .smc-help-bubble::before { border-bottom: 7px solid #13243a; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ''; left: 1.2rem; position: absolute; top: -7px; } .smc-help-bubble[hidden] { display: none; } @media (max-width: 480px) { .smc-help-bubble { left: 0; max-width: calc(100vw - 4rem); width: 280px; } } .smc-guide__region-note { padding: 0.85rem 1rem; border-left: 4px solid var(--smc-accent, #18745a); border-radius: 0.5rem; background: #eef8f4; font-weight: 650; } /* CheckCarCost brand colors. Functional success/error colors remain semantic. */ .smc-results { border-block-color: #ccd8ee; } .smc-results__grid { background: #ccd8ee; border-color: #ccd8ee; } .smc-related a { color: var(--smc-brand); } .smc-guide__audience { background: #eef3fa; border-left-color: #233b7a; } .smc-example { background: linear-gradient(135deg,#f6f8fc,#eef3fa); border-color: #c9d5ec; } .smc-action { border-color: #233b7a; color: #172033; } .smc-action:hover { background: #eef3fa; } .smc-action--print { background: #233b7a; color: #fff; } .smc-action--print:hover { background: #172033; } .smc-action-status { color: #233b7a; } .smc-dealer-hero { background: linear-gradient(135deg,#172033,#233b7a); } .smc-dealer-hero p, .smc-dealer-hero li { color: #eef3fa; } .smc-help-button { background: #eef3fa; border-color: #9db5e8; color: #172033; } .smc-help-button:hover { background: #dde6f5; } .smc-print-header { border-bottom-color: #233b7a !important; } .smc-print-header strong { color: #172033 !important; } .smc-guide__region-note { background: #eef3fa; border-left-color: var(--smc-accent,#233b7a); } /* Focused calculator header and section-grouping cleanup. */ .smc-calculator__header { align-items: start; display: grid; gap: .7rem 1.25rem; grid-template-columns: minmax(0,1fr) auto; } .smc-calculator__header .smc-eyebrow { grid-column: 1; grid-row: 1; margin: .65rem 0 0; } .smc-header-controls { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem 1rem; grid-column: 2; grid-row: 1; justify-content: flex-end; } .smc-header-controls .smc-language, .smc-header-controls .smc-region { float: none; margin: 0; } .smc-calculator__header > h2 { grid-column: 1 / -1; grid-row: 2; margin-bottom: 0; max-width: 100%; text-wrap: pretty; } .smc-calculator__header > p:last-child { grid-column: 1 / -1; grid-row: 3; margin-bottom: 0; } .smc-calculator:lang(ko) .smc-calculator__header h2, .smc-calculator:lang(ja) .smc-calculator__header h2 { overflow-wrap: normal; word-break: keep-all; } .smc-form-section { background: #f8faff; border: 1px solid #d7e0f0; border-radius: 14px; margin: 0 0 1.75rem; padding: clamp(1rem,3vw,1.35rem); } .smc-form-section__title { color: var(--smc-ink); font-size: 1.08rem; line-height: 1.3; margin: 0 0 1rem !important; word-break: keep-all; } .smc-form-section .smc-grid { margin-top: 0; } .smc-form-section > .smc-disclaimer { padding: 0 0 1rem; } .smc-form > .smc-error { margin-top: -.35rem; } @media (max-width: 720px) { .smc-calculator__header { grid-template-columns: 1fr; } .smc-header-controls { grid-column: 1; grid-row: 1; justify-content: flex-start; } .smc-calculator__header .smc-eyebrow { grid-column: 1; grid-row: 2; } .smc-calculator__header > h2 { grid-column: 1; grid-row: 3; font-size: clamp(1.65rem,7vw,2.2rem); } .smc-calculator__header > p:last-child { grid-column: 1; grid-row: 4; } } @media (max-width: 480px) { .smc-header-controls { align-items: stretch; display: grid; grid-template-columns: 1fr; width: 100%; } .smc-header-controls .smc-language, .smc-header-controls .smc-region { display: grid; gap: .3rem; grid-template-columns: 1fr; } .smc-header-controls select { width: 100%; } .smc-form-section { border-radius: 12px; margin-bottom: 1.5rem; } }