.tfc,
.tfc * {
box-sizing: border-box;
}
.tfc {
max-width: 720px;
margin: 0 auto;
padding: 22px 22px 18px;
border: 1px solid rgba(17, 24, 39, 0.10);
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
}
.tfc__header {
margin-bottom: 12px;
}
.tfc__title {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
color: #111827;
}
.tfc__group {
margin-top: 14px;
}
.tfc__label {
display: block;
font-weight: 600;
margin: 6px 0 10px;
font-size: 14px;
color: #111827;
}
.tfc__field {
display: flex;
align-items: stretch;
border: 1px solid rgba(17, 24, 39, 0.16);
border-radius: 14px;
overflow: hidden;
background: #fff;
} .tfc__field > input,
.tfc__field > input:focus,
.tfc__field > input:active,
.tfc__field > input:hover {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
.tfc__input {
flex: 1;
padding: 14px 16px;
font-size: 18px;
font-weight: 600;
color: #111827;
min-width: 0;
}
.tfc__input[readonly] {
color: #111827;
}
.tfc__suffix {
display: flex;
align-items: center;
justify-content: center;
min-width: 56px;
padding: 0 12px;
border-left: 1px solid rgba(17, 24, 39, 0.12);
background: #f9fafb;
font-weight: 700;
color: #111827;
user-select: none;
} .tfc__turnover::-webkit-outer-spin-button,
.tfc__turnover::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.tfc__turnover[type='number'] {
-moz-appearance: textfield;
} .tfc__range {
width: 100%;
margin-top: 12px;
margin-bottom: 6px;
background: transparent;
-webkit-appearance: none;
appearance: none;
height: 22px; }
.tfc__range:focus {
outline: none;
} .tfc__range::-webkit-slider-runnable-track {
height: 6px;
border-radius: 999px;
background: linear-gradient(
to right,
#1d4ed8 0%,
#1d4ed8 var(--tfc-pct, 0%),
#e5e7eb var(--tfc-pct, 0%),
#e5e7eb 100%
);
} .tfc__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 999px;
background: #1d4ed8;
border: 3px solid #ffffff;
box-shadow: 0 8px 16px rgba(17, 24, 39, 0.18);
margin-top: -6px; } .tfc__range::-moz-range-track {
height: 6px;
border-radius: 999px;
background: #e5e7eb;
}
.tfc__range::-moz-range-progress {
height: 6px;
border-radius: 999px;
background: #1d4ed8;
}
.tfc__range::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 999px;
background: #1d4ed8;
border: 3px solid #ffffff;
box-shadow: 0 8px 16px rgba(17, 24, 39, 0.18);
}
.tfc__group--result .tfc__input {
font-size: 28px;
letter-spacing: 0.01em;
}
.tfc__note {
margin-top: 10px;
font-size: 13px;
line-height: 1.35;
color: rgba(17, 24, 39, 0.70);
}
@media (max-width: 480px) {
.tfc { padding: 18px 18px 14px; }
.tfc__title { font-size: 20px; }
.tfc__input { font-size: 16px; }
.tfc__group--result .tfc__input { font-size: 22px; }
}