@charset "utf-8";

.tab_area1 {margin: 0 auto 20px;max-width: 700px;}
.tab_list {display: flex;border-bottom: 2px solid #ddd;padding: 0;border-radius: 3px;margin: 0;list-style: none;max-width: 700px;}
.tab_list li {flex: 1;text-align: center;cursor: pointer;font-weight: 600;padding: 16px 10px;position: relative;border: 1px solid transparent; border-bottom: none; box-sizing: border-box;}
.tab_list li a {display: block;color: #767676;font-size: 18px;text-decoration: none;padding: 10px 10px;}
.tab_list li.on a {font-weight: 1000;color: #00a5a0;}
.tab_list li::after {content: "";position: absolute;bottom: 0;left: 0%;width: 100%;height: 4px;background-color: transparent;}
.tab_list li.on {background: #fff;color: #00a5a0;font-weight: 700;}
.tab_list li.on::after{background-color: #00a5a0;}

/* 탭 콘텐츠 영역 */
.tab_contents {max-width: 700px;margin: 0 auto;background: #fff;border-top: none;margin-bottom: 60px;padding: 30px 25px;border-radius: 0 0 6px 6px;font-family: 'Noto Sans KR', sans-serif;}
.tab_panel {display: none;}
.tab_panel.active {display: block;}

.calc-title {font-size: 43px;font-weight: 800;color: #333;margin: 100px 0 20px; text-align: center;}

.formWrap {padding: 40px 20px;background-color: #f5f7fa;font-family: 'Noto Sans KR', sans-serif;}
.formBox {background-color: #fff;padding: 30px 0px;border-radius: 3px;margin: 0 auto;}
.formBox label {margin-bottom: -15px;font-size: 16px;font-weight: 500;color: #767676;}
.formBox .tit {font-size: 22px;font-weight: 700;margin-bottom: 25px;color: #333;text-align: center;}
.formBox form {display: flex;flex-direction: column;gap: 35px;}
.formBox .input,
.formBox select {height: 70px; padding: 12px 14px;font-size: 15px;border: 1px solid #eee;border-radius: 3px;background-color: #fff;width: 100%;box-sizing: border-box;transition: border-color 0.2s;}

.formBox .input:focus,
.formBox select:focus {border-color: #00a5a0 !important;outline: none;border-width: 3px;}

.button-group {display: flex;justify-content: center;gap: 10px;margin-top: 50px;}
.btn-calc, .btn-reset {height: 70px;padding: 11px 110px;font-size: 18px;font-weight: semi-bold;border: none;border-radius: 3px;cursor: pointer;transition: background-color 0.25s;}
.btn-calc {background-color: #00a5a0;color: #fff;}
.btn-calc:hover {background-color: #005fa3;}
.btn-reset {background-color: #fff;border: 1px solid #d7d7d7; color: #333;}
.btn-reset:hover {background-color: #dcdcdc;}
.input-wrap {position: relative;}
.input-wrap label {display: block;margin-bottom: 18px;}
.unit {position: absolute;right: 20px;top: 50%;transform: translateY(-50%);color: #666;font-size: 18px;pointer-events: none;}
.input.right-input {text-align: right;font-size: 18px;padding-right: 60px;}

.result-box {background: #fff;border: 2px solid #00a5a0;padding: 15px;margin-top: 45px;margin-bottom: 10px;font-size: 15px;color: #333; max-width:700px;}
.result-box .result-text {color: #333;font-size: 24px;line-height: 2.0;margin-top: 20px;margin-left: 25px;margin-bottom: 20px;}
.result-box .divider {border-top: 1px solid #ccc;margin: 25px auto; margin-right: 20px;}
.result-box .right-bold {float: right;font-weight: bold;/display: inline-block;text-align: right;margin-right: 25px;}
.result-note {font-size: 17px;color: #666;line-height: 1.4;}

.result-box1 {background: #fff;margin-top: 45px;margin-bottom: 10px;font-size: 15px;color: #333; max-width:700px;}
.result-box1 .result-text {color: #333;font-size: 24px;line-height: 2.0;margin-top: 20px;margin-left: 25px;margin-bottom: 20px;}

.result-table {width: 100%;border-collapse: collapse;font-size: 15px;text-align: center;#ccc;background-color: #fff;}
.result-table thead {background-color: #f0fbfa;border-bottom: 2px solid #ccc;}
.result-table thead th {padding: 12px 8px;font-weight: 600;color: #333;}
.result-table tbody td {padding: 10px 6px;border-bottom: 1px solid #eaeaea;color: #444;}
.result-table tbody tr:hover {background-color: #f9f9f9;}
.result-table tbody tr:last-child td {border-bottom: none;}

.input-error {border: 2px solid #d44330 !important;}
.error-message {color: #d44330;font-size: 12px;position: absolute;top: 100%;left: 0;margin-top: 4px;z-index: 10;}

.calc-box {background-color: #00a5a0;border-radius: 5px;padding: 20px 30px;margin: 50px 0;display: flex;align-items: center;justify-content: space-between;color: #fff;font-family: 'Noto Sans KR', sans-serif;}
.calc-box .calc-box-text {font-size: 17px;font-weight: 500;text-align: right; margin-top:20px; margin-bottom:20px;}
.calc-box .calc-box-button {background-color: white;color: #00a5a0;padding: 15px 25px;border-radius: 50px;text-decoration: none;font-weight: 600;font-size: 14px;transition: background-color 0.3s;}