@charset "UTF-8";
/* materialize.css 는 레이아웃이 <link> 로 부른다 — 여기서 @import 하면 두 번 받는다(티켓 27, C07) */
@import "/css/common_hr_new-55496a85fea73c2eaefdb921f42fbbe7.css";

@font-face {
    font-family: 'NotoSansKR-Medium';
    src: url('/font/NotoSansKR-Medium.woff2') format('woff2'), url('/font/NotoSansKR-Medium.otf') format('opentype');
  font-display: swap;  /* 글꼴을 받는 동안 글자를 먼저 보인다(티켓 27) */
}

@font-face {
    font-family: 'NotoSansKR-Regular';
    src: url('/font/NotoSansKR-Regular.woff2') format('woff2'), url('/font/NotoSansKR-Regular.otf') format('opentype');

  font-display: swap;  /* 글꼴을 받는 동안 글자를 먼저 보인다(티켓 27) */
}@font-face {
    font-family: 'NotoSansKR-DemiLight';
    src: url('/font/NotoSansKR-DemiLight.woff2') format('woff2'), url('/font/NotoSansKR-DemiLight.otf') format('opentype');
  font-display: swap;  /* 글꼴을 받는 동안 글자를 먼저 보인다(티켓 27) */
}

@font-face {
    font-family: 'BebasNeue-Regular';
    font-style: normal;
    src: url('/font/BebasNeue-Regular.woff2') format('woff2'), url('/font/BebasNeue-Regular.otf') format('opentype');
  font-display: swap;  /* 글꼴을 받는 동안 글자를 먼저 보인다(티켓 27) */
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons');
    src: url('/font/MaterialIcons-Regular.ttf') format('truetype');
    /* For IE6-8 */
  font-display: block;  /* 아이콘은 글자(keyboard_tab 등)가 비치지 않게 */
}

/* 공통 */
html, body{height: 100%;}
body{overflow-y: hidden;font-family: "NotoSansKR-Regular";font-size: 14px;color: #2f2f2f;line-height: 1.6;letter-spacing: -.5px;font-weight: normal;background: none;}
.cntYETA *{margin: 0;padding: 0;box-sizing: border-box;}
.d_flex{display: flex;align-items: center;gap: 4px;}
.space_between{display: flex;justify-content: space-between;}
.flex_full{flex: 1;}
.txtC{text-align: center !important;}
.txtR{text-align: right !important;}
.txtL{text-align: left !important;}
.txt_red{color: #AE2222 !important;}
.btnGroup{display: flex;gap: 10px;align-items: center;}
.mt50{margin-top: 50px !important;}
.mt10{margin-top: 10px !important;}
.mt5{margin-top: 5px !important;}
.none{display: none !important;}
b{font-weight: 500;font-family: 'NotoSansKR-Medium';}
.medFlex{display: inline-flex;flex-flow: row;flex-wrap: wrap;gap: 3px;}

/* 레이아웃 */
.wrap{height: 100%;}
.cntYETA{display: flex;flex-direction: column;position: relative;overflow-y: scroll;margin: auto;width: 100%;min-width: 1280px;max-width: 1920px;height: calc(100% - 60px);} /* 1280 미만(폰·태블릿) 배치는 티켓 24 — 그 전까지는 가로 스크롤 */


/* 폼 */
.cntYETA input[type="text"]:not(.typingInput){margin: 0 !important;height: 34px !important;border: none;border-bottom: 1px solid #707070;}
.cntYETA select{padding: 0 25px 0 5px;width: 240px;height: 34px;border: none;border-bottom: 1px solid #707070;border-radius: 0;-webkit-appearance: none;appearance: none;background: #fff url(/img/arr_select.png) right center no-repeat;}

.cntYETA input[type="radio"].radio_type1, 
.cntYETA .radio_merge input[type="radio"]{display: inline-block;-webkit-appearance: none;appearance: none;}
.cntYETA input[type="radio"].radio_type1 + label{display: inline-block;margin-left: 4px;padding: 0 20px;min-width: 86px;line-height: 28px;border: 1px solid #8E8E8E;border-radius: 8px;text-align: center;font-size: 14px;color: #8A8A8A;background-color: #fff;}
.cntYETA input[type="radio"].radio_type1:checked + label{border-color: #4061CF;color: #fff;background-color: #4061CF;}
.cntYETA .dona_type .radio_type1 + label,
.cntYETA .dona_type .radio_type1:checked+label{margin-top: 10px;padding: 0 10px !important;min-width: 86px;}

.cntYETA .radio_merge{display: inline-flex;align-items: center;gap: 0;}
.cntYETA .radio_merge input[type="radio"] + label{margin: 0;padding: 0 20px;min-width: 86px;height: 38px;line-height: 35px;border: 1px solid #606060;border-radius: 0;text-align: center;font-size: 14px;color: #8A8A8A;background-color: #fff;}
.cntYETA .radio_merge input[type="radio"]:checked + label{border-color: #BB2649;color: #fff;background-color: #BB2649;}
.cntYETA .radio_merge input[type="radio"]:disabled:checked + label{border-color: #97989a;color: #fff;background-color: #97989a;}
.cntYETA .radio_merge input[type="radio"]:first-child+ label{border-radius: 7px 0 0 7px;}
.cntYETA .radio_merge input[type="radio"] + label:last-child{border-radius: 0 7px 7px 0;}

.cntYETA input[type="checked"]{display: inline-block;-webkit-appearance: none;appearance: none;}
.cntYETA .checkbox_type1 + label{display: inline-block;padding-left: 24px;width: 24px;height: 24px;background: url(/img/input_check.png) left center;}
.cntYETA .checkbox_type1:checked + label{border-color: #53389E;color: #fff;background: url(/img/input_check_checked.png) left center;;}

/* 버튼 */
.cntYETA .btn{display: flex;justify-content: center;align-items: center;gap: 4px;padding: 0 10px;height: 34px;border-radius: 8px;text-align: center;letter-spacing: 0;line-height: inherit;text-transform: inherit;font-family: 'NotoSansKR-Regular';box-shadow: none;cursor: pointer;}
.cntYETA .btn_link{display: inline-flex;text-indent: -9999px;}
.cntYETA .btn_impact{color: #fff;background-color: #4061CF;}
.cntYETA .btn_impact:hover, .cntYETA .btn_impact:focus{background-color: #2e4591 !important;}
.cntYETA .btn_gray{color: #475467;background-color: #E6E8ED;}
.cntYETA .btn_gray:hover, .cntYETA .btn_gray:focus{color: #000;background-color: #d5d5d5 !important;}


/* 테이블 */
.cntYETA .tbl_type1{margin-top: 10px;width: 100%;border-collapse: collapse;}
.cntYETA .tbl_type1 th{height: 55px;border-bottom: 1px solid #D1D1D1;text-align: center;font-weight: normal;font-weight: 500;font-family: 'NotoSansKR-Medium';color: #293056;background-color: #F2F4F7;}
.cntYETA .tbl_type1 td{height: 60px;border-bottom: 1px solid #D1D1D1;text-align: center;font-size: 16px;}

.cntYETA .tbl_type2{width: 860px;table-layout: fixed;border-collapse: collapse;}
.cntYETA .tbl_type2 td{height: 45px;border-bottom: 1px solid #D1D1D1;}
.cntYETA .tbl_type2 td:first-child{padding-left: 20px;}
.cntYETA .tbl_type2 td .ellipsis{display: block;width: 100%;}	/* 파일명 칸 폭을 따른다(버튼 칸을 220px 로 넓혀 300px) */
.cntYETA .tbl_type2 td .btn{min-width: 130px;}
.cntYETA .tbl_type2 td:last-child:not([colspan]){white-space: nowrap;}	/* [다시 제출]·[삭제] 와 [다운로드] 를 한 줄에 — 위아래로 쌓이지 않게 */
.cntYETA .tbl_type2 td[name=fileView]{cursor: pointer;}
.cntYETA .tbl_type2 td[name=fileView]:hover {font-family: 'NotoSansKR-Medium';}

.cntYETA .tbl_card{flex: 1;width: 100%;border-collapse: collapse;}
.cntYETA .tbl_card th, .cntYETA .tbl_card td{text-align: right;line-height: 1.3;}
.cntYETA .tbl_card th{padding: 2px 15px;height: 40px;border-bottom: 1px solid #C6C6C6;font-size: 14px;color: #004098;}
.cntYETA .tbl_card td{padding: 2px 10px 2px 0;height: 45px;border-bottom: 1px solid #DBDBDB;}
.cntYETA .tbl_card .first_color{border: 1px solid #fff;border-left: none;background-color: #d0dde7;}
.cntYETA .tbl_card .second_color{border: 1px solid #fff;background-color: #e4ebf1;}
.cntYETA .tbl_card tr:hover .first_color{background-color: #c4d4e0;}
.cntYETA .tbl_card tr:hover .second_color{background-color: #d7e1ea;}
.cntYETA .tbl_card tr:hover td{background-color: #f0f4f7;}
.cntYETA .tbl_card td input[type="text"]{padding: 0 2px;width: 84%;min-width: 90px;border-bottom: 1px solid #707070;text-align: right;font-size: 14px;}

.cntYETA .tbl_q{margin: 0 -20px;width: calc(100% + 40px);border-collapse: collapse;}
.cntYETA .tbl_q th, .cntYETA .tbl_q td{padding: 3px;border: 1px solid #D1D1D1;font-size: 14px;color: #293056;}
.cntYETA .tbl_q th{height: 45px;text-align: center;font-weight: normal;font-weight: 500;font-family: 'NotoSansKR-Medium';color: #fff;background-color: #BA0000;}


/* 탭 */
.cntYETA .tabArea{flex: 1;display: flex;flex-direction: column;}
.cntYETA .tabArea .tabHeader{display: flex;justify-content: center;align-items: center;height: 140px;background-color: #D1DDEC;}
.cntYETA .tabArea .tabLink{display: flex;justify-content: space-between;align-items: center;}
.cntYETA .tabArea .tabContent{flex: 1;overflow: hidden;}
.cntYETA .tabArea .tabPane{display: none;}
.cntYETA .tabArea .tabPane.active{display: block;}

.cntYETA .tabYETA{background-color: #D1DDEC;}
.cntYETA .tabYETA .tabLink{gap: 60px;}
.cntYETA .tabYETA .tabLink a{display: flex;align-items: center;gap: 40px;position: relative;padding-left: 90px;min-width: 125px;height: 84px;font-size: 20px;color: #1654A7;}
.cntYETA .tabYETA .tabLink a.on{font-family: 'NotoSansKR-Medium';}
.cntYETA .tabYETA .tabLink a + a:before{display: block;content:"";position: absolute;left: -40px;top: 32px;width: 22px;height: 22px;background: url(/img/step_arr.png) center no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta01{background: url(/img/submit1_none.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta02{background: url(/img/submit2_none.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta03{background: url(/img/submit3_none.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta04{background: url(/img/submit4_none.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta01.on{background: url(/img/submit1_now.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta02.on{background: url(/img/submit2_now.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta03.on{background: url(/img/submit3_now.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta04.on{background: url(/img/submit4_now.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta01.stepped{background: url(/img/submit1_done.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta02.stepped{background: url(/img/submit2_done.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta03.stepped{background: url(/img/submit3_done.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabLink a.yeta04.stepped{background: url(/img/submit4_done.png) 0 0 no-repeat;}
.cntYETA .tabYETA .tabPane{padding: 0 clamp(40px, calc((100% - 1460px) / 2), 230px) 100px;} /* 흰 판은 최대 1460px(1920 에서 예전과 같다), 좁으면 좌우 40px 까지 */
.cntYETA .tabYETA .summary .wd380px{flex-shrink: 0;}
/* 메인 왼쪽 칸: 제목·안내 상자는 위에서부터, 그림·버튼 묶음은 아래에 붙인다(티켓 19).
   예전: space-between + 안내 상자 margin-top:-150px 라 아래 묶음 높이가 조금만 늘어도(버튼 밑 안내 문구) 안내 상자가 "입력기간"을 덮었다 */
.cntYETA .tabYETA .summary .wd380px{justify-content: flex-start;}
.cntYETA .tabYETA .summary .wd380px > .yeta-notice--top{margin-top: 12px !important;}
.cntYETA .tabYETA .summary .wd380px > div:last-child{margin-top: auto;}

.cntYETA .tabProcess .tabHeader{height: 78px;}
.cntYETA .tabProcess .tabLink{position: relative;width: 1050px;height: 78px;}
.cntYETA .tabProcess .tabLink a{display: flex;align-items: center;gap: 8px;position: relative;}
.cntYETA .tabProcess .tabLink a i{display: inline-block;width: 30px;height: 30px;}
.cntYETA .tabProcess .tabLink a + a:before{display: block;content:"";position: absolute;left: -70px;top: 2px;width: 58px;height: 15px;border-bottom: 1px dashed #4061CF;}
.cntYETA .tabProcess .tabLink a span{display: inline-block;text-align: center;font-size: 18px;}
.cntYETA .tabProcess .tabLink a.on span{font-family: "NotoSansKR-Medium";}
.cntYETA .tabProcess .tabLink a.pro01 i{background: url(/img/step1_none.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro02 i{background: url(/img/step2_none.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro03 i{background: url(/img/step3_none.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro04 i{background: url(/img/step4_none.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro05 i{background: url(/img/step5_none.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro01.on i{background: url(/img/step1_now.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro02.on i{background: url(/img/step2_now.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro03.on i{background: url(/img/step3_now.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro04.on i{background: url(/img/step4_now.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro05.on i{background: url(/img/step5_now.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro01.stepped i{background: url(/img/step1_done.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro02.stepped i{background: url(/img/step2_done.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro03.stepped i{background: url(/img/step3_done.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro04.stepped i{background: url(/img/step4_done.png) center no-repeat;}
.cntYETA .tabProcess .tabLink a.pro05.stepped i{background: url(/img/step5_done.png) center no-repeat;}

/* 레이어팝업 — 등장·퇴장은 확인창(.rc_modal_section)과 같다(티켓 15): 막·상자 opacity, 상자 scale .96→1.
   여닫기는 .on 만 붙이고 뗀다. @starting-style·display allow-discrete 를 모르는 브라우저는 예전처럼 즉시.
   Esc·바깥 클릭·초점 가두기는 hrCommon.js 「공통 모달」 */
.layerPop{display: none;position: fixed;left: 0;top: 0;z-index: 1000;width: 100%;height: 100%;opacity: 0;pointer-events: none;transition: opacity var(--dur-fast) var(--ease-out);transition: opacity var(--dur-fast) var(--ease-out), display var(--dur-fast) allow-discrete;}
.layerPop.on{display: block;opacity: 1;pointer-events: auto;transition-duration: var(--dur-base);}
@starting-style{.layerPop.on{opacity: 0;}}
.layerPop .popTrigger{position: fixed;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .4);}
.layerPop .popContainer{display: flex;justify-content: center;align-items: center;position: fixed;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;max-height: 100%;}
.popContainer .inner{display: flex;flex-direction: column;max-width: calc(100% - 32px);max-height: calc(100% - 32px);border: 1px solid #000;border-radius: 10px;box-shadow: 10px 10px 10px rgba(0, 0, 0, .16);background-color: #fff;scale: .96;transition: scale var(--dur-fast) var(--ease-out);}
.layerPop.on .popContainer .inner{scale: 1;transition-duration: var(--dur-base);}
@starting-style{.layerPop.on .popContainer .inner{scale: .96;}}
.popContainer .inner:focus{outline: none;} /* 열 때 상자 자체에 초점을 둔다(첫 입력칸에 두면 달력·목록이 바로 열린다) */
.popHeader .btn_pop_close:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: 2px;}
.popHeader{display: flex;justify-content: space-between;align-items: center;padding: 0 25px 0 30px;height: 68px;border-bottom: 1px solid #98A2B3;}
.popHeader h4{display: flex;align-items: center;gap: 6px;font-family: "NotoSansKR-Medium";font-size: 20px;}
.popHeader h4 small{display: inline-block;margin-left: 10px;padding-top: 10px;font-family: "NotoSansKR-Regular";font-size: 13px;color: #202020;}
.popHeader .btn_pop_close{width: 40px;height: 40px;text-indent: -9999px;background: url(/img/btn_pop_close.png) center no-repeat;cursor: pointer;}
.popContent{flex: 1;overflow-y: auto;padding: 20px 60px;}
.popContent .card{flex: 1;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden;margin: -20px -60px;min-width: inherit;max-width: inherit;min-height: auto;height: 110px;border-radius: 0;border: none;box-shadow: none;}
.popContent .card .head{padding: 15px 25px 15px 35px;height: 70px;border-radius: 0;}
.popContent .card .head .space_between{align-items: center;}
.popContent .card .head .btn_history{margin-left: 30px;}
h5{font-family: "NotoSansKR-Medium";font-size: 14px;color: #B92754;}
.popFooter{padding: 15px 30px 0;height: 75px;border-top: 1px solid #98A2B3;}
.popFooter .btnGroup{display: flex;gap: 10px;}
.popFooter .btnGroup .btn{height: 38px;border-radius: 8px;}
.popFooter .btnGroup .btn_gray{width: 170px;}

/* 컨텐츠 */
.cntYETA .row{margin: auto;padding: 20px 40px 40px;width: 100%;border-radius: 2px;background-color: #fff;}
.cntYETA .row + .row{margin-top: 10px;}
.cntYETA .doc_view{flex: 1 1 500px;margin-top: 40px;width: auto;max-width: 900px;min-height: 600px;text-align: center;}
#attachFile .space_between{flex-wrap: wrap;} /* 미리보기(.doc_view)가 옆에 들어갈 폭이 없으면 목록 아래로 */
.cntYETA .summary{display: flex;justify-content: space-between;gap: 100px;margin-bottom: 30px;padding: 20px 40px;}
.cntYETA .summary h2{font-size: 35px;line-height: 1.3;}
.cntYETA .summary h2 b{font-family: "NotoSansKR-Medium";font-size: 40px;}
.cntYETA .summary h2 small{margin-right: 10px;font-family: "NotoSansKR-Medium";font-size: 25px;}
.cntYETA .summary h2 em{font-size: 25px;color: #2D53BC;}

.cntYETA .title{display: flex;align-items: center;gap: 8px;margin-bottom: 10px;font-size: 30px;}
.cntYETA .subTit{display: flex;justify-content: space-between;align-items: center;padding-bottom: 5px;border-bottom: 2px solid #6f6f6f;font-size: 16px;}
.cntYETA .subTit span{font-family: "NotoSansKR-Regular";font-size: 14px;}
.cntYETA .subTit .txt_red{margin-left: 20px;font-family: "NotoSansKR-Regular";font-size: 13px;}
.cntYETA .serviceInfo .btn_go{display: block;margin-bottom: 10px;width: 245px;line-height: 50px;border: 1px solid #848484;text-align: center;font-size: 18px;color: #848484;}
.cntYETA .serviceInfo .btn_go.inline{display: inline-block;margin-right: 10px;margin-bottom: 0px;}
.cntYETA .serviceInfo .btn_go:hover{border-color: #000;color: #000;;}

.summary > div{display: flex;flex-direction: column;justify-content: space-between;}
.summary .btn_dataIn{height: 54px;border: 1px solid #E9D7FE;font-size: 25px;color: #fff;background-color: #4061CF;}
.summary .btn_dataIn:hover, .summary .btn_dataIn:focus{background-color: #2e4591 !important;}
.summary ul{display: grid;grid-template-columns: 1fr 1fr;gap: 10px;margin-top: 10px;}
.summary li{padding: 10px 20px;height: 90px;border: 1px solid #CBCBCB;color: #9A9A9A;}
.summary li .tax_name{display: flex;align-items: center;gap: 4px;font-size: 20px;}
.summary li.on{color: #000;}
.summary li .tax_how{text-align: right;font-size: 16px;}
.summary li .tax_how strong{margin-right: 10px;text-align: right;line-height: 1;font-size: 25px;}
.summary .tax_add{display: flex;justify-content: space-between;align-items: center;gap: 14px;margin-top: 30px;line-height: 1;font-size: 30px;}
.summary .tax_add .tax_how strong{margin-right: 10px;font-size: 40px;color: #2D53BC;}
.summary .tax_add.more .tax_how strong{color: #BB2649;}
.serviceInfo{margin-top: 60px;padding: 40px 40px;border-top: 2px solid #D1DDEC;}
.serviceInfo article em{color: #2D53BC;}
.basicInfo{display: flex;margin-top: 20px;}
.basicInfo .picWrap{display: flex;justify-content: flex-end;padding-right: 60px;width: 280px;text-align: right;}
.basicInfo .picWrap .pic{width: 100px;height: 100px;overflow: hidden;border-radius: 50%;}
.basicInfo .picWrap .pic img{width: 100%;}
.basicInfo .th_label, .th_label{position: relative;margin-bottom: 5px;font-family: "NotoSansKR-Medium";color: #004098;font-size: 14px;}
.basicInfo .badge{display: inline-block;margin-left: 5px;width: 86px;height: 22px;line-height: 19px;border: 1px solid #8E8E8E;border-radius:208px;text-align: center;font-size: 14px;color: #8A8A8A;}
.basicInfo > div:last-child{flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 20px;font-size: 16px;}
.basicInfo input, .basicInfo select{font-size: 16px;}
.basicInfo .d_flex{flex-wrap: wrap;row-gap: 16px;}	/* 한 줄 다섯 묶음이 넘치면 다음 줄로 — 예전엔 1440px 에서 [외국인 단일세율] 이 화면 밖 */
.basicInfo .radio_merge input[type="radio"] + label{white-space: nowrap;}	/* "세대주의 배우자" 가 두 줄로 접혀 버튼 아래로 넘쳤다 */
.input_search{display: flex;align-items: center;width: 140px;border-bottom: 1px solid #707070;}
.input_search input{width: 100%;border-bottom: none !important;}
.input_search+.flex_full input{width: 100%;}
.basicInfo .survey{margin-top: 40px;width: 1160px;max-width: 100%;}
.basicInfo .survey dt{padding-left: 30px;line-height: 50px;border-radius: 18px 18px 0 0;font-family: "NotoSansKR-Medium";font-size: 14px;color: #004098;background-color: #D1DDEC;}
.basicInfo .survey dd{border: 1px solid #E9D7FE;}
.basicInfo .survey li{display: flex;justify-content: space-between;align-items: center;padding: 0 30px;height: 60px;border-bottom: 1px dashed #D1DDEC;font-size: 16px;}
.basicInfo .survey li:last-child {border-bottom: none;}
.basicInfo .survey .radio_merge input[type="radio"] + label{width: 40px;border-color: #BEC5D2;color: #000;}
.basicInfo .survey .radio_merge input[type="radio"]:checked + label{border-color: #BB2649;color: #fff;background-color: #BB2649;;}
.period{display: flex;align-items: center;gap: 10px;}
.input_date{display: flex;align-items: center;width: 130px;border-bottom: 1px solid #707070;}
.input_date input{width: 100%;border-bottom: none !important; }
.gibu_total{margin-left: 40px;width: 120px;text-align: right;}
.gibu_total b{line-height: 34px;}

.cntYETA .tablHeader{display: flex;gap: 10px;align-items: center;margin-top: 10px;}
.cntYETA .tablHeader .btn{width: 220px;color: #fff;}
.cntYETA .tablHeader .btn_pastTarget{padding-left: 36px;color: #fff;background: #7D94E3 url(/img/ico_btn1.png) 12px center no-repeat !important;}
.cntYETA .tablHeader .btn_addTarget{padding-left: 45px;color: #fff;background: #4061CF url(/img/ico_btn2.png) 28px center no-repeat !important;}

.cntYETA .btn_support{padding-left: 36px;width: 150px;height: 38px;border: 1px solid #BEC5D2;border-radius: 8px;color: #2E2E2E;background: #fff;}
.cntYETA .btn_support:hover, .cntYETA .btn_support:focus{background: #f5f5f5;background-color: #f5f5f5 !important;}
.cntYETA .btn_support1{padding-left: 36px;width: 150px;height: 38px;border: 1px solid #BEC5D2;border-radius: 8px;color: #2E2E2E;background: #fff url(/img/ico_support1.png) 16px center no-repeat;}
.cntYETA .btn_support1:hover, .cntYETA .btn_support1:focus{background: #f5f5f5 url(/img/ico_support1.png) 16px center no-repeat !important;}
.cntYETA .btn_support2{padding-left: 36px;width: 150px;height: 38px;border: 1px solid #BEC5D2;border-radius: 8px;color: #2E2E2E;background: #fff url(/img/ico_support2.png) 16px center no-repeat;}
.cntYETA .btn_support2:hover, .cntYETA .btn_support2:focus{background: #f5f5f5 url(/img/ico_support2.png) 16px center no-repeat !important;}
.cntYETA .btn_save{width: 87px;height: 38px;color: #fff;background-color: #4061CF;}
.cntYETA .btn_save.large{align-self: flex-start;width: 160px;height: 44px;}	/* 기본정보 [저장] — 예전 폭 77% 는 화면을 가로지르는 막대였다. 폰은 아래 미디어 쿼리에서 꽉 채운다 */
.cntYETA .btn_save:hover, .cntYETA .btn_save:focus{background-color: #2e4591 !important;}
.cntYETA .btn_save.disabled, .cntYETA button:disabled,
.cntYETA .btn_save.disabled:hover, .cntYETA button:disabled:hover,
.cntYETA .btn_save.disabled:focus, .cntYETA button:disabled:focus{background-color: #E4E4E4 !important;cursor: default;}
/* 증빙 화면 버튼 (티켓 28, S23-e3): 30px 아이콘 + hover 말풍선 → 아이콘 + 글자 버튼. 예전 "재업로드"는 버튼 전체를 180° 돌려 글자가 거꾸로였다 — 아이콘만 돌린다 */
.cntYETA .btn_download,
.cntYETA .btn_delete2{position: relative;display: inline-flex;align-items: center;gap: 6px;min-width: 0 !important;height: 36px;padding: 0 12px 0 10px;border: 1px solid #BEC5D2;border-radius: 4px;text-indent: 0;font-size: 13px;color: #333;background: #fff;white-space: nowrap;}	/* 칸이 좁아도 "다시 제출" 글자가 줄바꿈되지 않게 — 버튼째 다음 줄로 */
.cntYETA .btn_download::before,
.cntYETA .btn_delete2::before{content: "";flex: none;width: 16px;height: 16px;background: url(/img/ico_download.png) center / contain no-repeat;}
.cntYETA .btn_delete2::before{background-image: url(/img/ico_delete.png);}
.cntYETA .btn_download:focus, .cntYETA .btn_delete2:focus{background: #fff;color: #333;}	/* materialize .btn:focus 청록 배경을 덮는다 */
.cntYETA .btn_download.rotate{transform: none;}
.cntYETA .btn_download.rotate::before{transform: rotate(180deg);}
@media (hover: hover) and (pointer: fine) {
  .cntYETA .btn_download:hover, .cntYETA .btn_delete2:hover{border-color: #808080;background: #f5f5f5 !important;}
}

.guide{margin-top: 35px;}
.guide b{display: inline-block;font-family: "NotoSansKR-Medium";font-size: 14px;color: #E65303;}
.guide .box{position: relative;margin-top: 10px;padding: 7px;border: 1px solid #E65303;border-radius: 6px;}
.guide .box:before{display: block;content:"";position: absolute;left: 7px;top: 7px;height: calc(100% - 14px);border-radius: 6px;background: #FFF1E9 url(/img/ico_guide.png) center no-repeat;}
.guide.guide1 .box{padding: 7px 20px 10px 145px;}
.guide.guide1 .box:before{width: 116px;}
.guide.guide2 .box{padding: 7px 20px 10px 60px;}
.guide.guide2 .box:before{display: none;}
.guide.guide3 .box{padding: 7px 20px 10px 80px;}
.guide.guide3 .box:before{width: 54px;}
.guide .box em{color: #E65303;}
.guide .box > div{position: relative;margin-top: 6px;padding-left: 20px;line-height: 18px;}
.guide .box>div span{display: inline-block;position: absolute;left: 0;top: 2px;width: 14px;height: 14px;}
.guide .box .icon_check{background-size: 100%;}
.guide .box .num1{background: url(/img/num_1.png) 0 0 no-repeat;}
.guide .box .num2{background: url(/img/num_2.png) 0 0 no-repeat;}
.guide .box .num3{background: url(/img/num_3.png) 0 0 no-repeat;}
.guide .box .num4{background: url(/img/num_4.png) 0 0 no-repeat;}
.guide .box .num5{background: url(/img/num_5.png) 0 0 no-repeat;}
.guide .box .num0{display: inline-block;position: absolute;left: 0;top: 2px;width: 14px;height: 14px;}
.guide .box .num0:after{display: block;content:"";position: absolute;left: 8px;top: calc(50% - 2px);width: 3px;height: 3px;border-radius: 50%;background-color: #E9631B;}
.check_yes{display: inline-block;margin: auto;width: 19px;height: 19px;border-radius: 50%;background-color: #4061CF;}
.toggleWrap{position: relative;width: 54px;height: 25px;border: 1px solid #585858;border-radius: 13px;background-color: #97989A;cursor: pointer;}
.toggleWrap .toggle{position: absolute;left: -1px;top: -1px;z-index: 1;width: 25px;height: 25px;border: 1px solid #585858;border-radius: 50%;background-color: #fff;transition: .2s;}
.toggleWrap.on{border: 1px solid #4061CF;background-color: #D1DDEC;}
.toggleWrap.on .toggle{position: absolute;left: 28px;top: -1px;z-index: 1;width: 25px;height: 25px;border: 1px solid #4061CF;border-radius: 50%;background-color: #fff;}

.panlWrap{display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 10px;margin-top: 20px;}
.panlWrap .panel{display: flex;flex-direction: column;justify-content: space-between;padding: 12px 15px;min-width: 200px;height: 145px;border: 1px solid #7D94E3;border-radius: 5px;background-color: #D1DDEC;}
.panlWrap .panel b{display: block;text-align: center;line-height: 1.2;font-family: "NotoSansKR-Medium";font-size: 17px;color: #5D5D5D;}
.panlWrap .panel small{display: block;text-align: center;font-family: NotoSansKR-Regular;line-height: 1.2;font-size: 14px;color: #979797;}
.panlWrap .panel input{padding: 0 12px;width: auto;height: 34px;border: none;border-radius: 8px;text-align: right;font-family: "NotoSansKR-Medium";font-size: 14px;color: #000;background-color: #fff;}
.panlWrap .panel input:focus{border-bottom: none !important;}
.msg01{display: flex;justify-content: center;align-items: center;margin-top: 30px;text-align: center;font-size: 25px;}
.banGroup{display: flex;gap: 10px;margin-top: 10px;}
.attatchArea{margin-top: 10px;width: 100%;}
.attatchArea .init{display: flex;justify-content: center;align-items: center;width:100%;height: 100%;cursor: pointer;}
.attatchArea .init b{font-family: "NotoSansKR-Medium";color: #BB2649;}
.attachList li{display: flex;justify-content: space-between;align-items: center;padding-left: 20px;height: 40px;border: 1px solid #dadada;}

.taxMonitor{display: flex;overflow: hidden;}
.taxMonitor > div:first-child{display: flex;flex-direction: column;flex-shrink: 0;width: 280px;border-right: 1px solid #707070;}
.taxMonitor > div:first-child select{margin: auto;}
.taxMonitor > div:last-child{flex: 1;min-width: 0;padding: 10px 0 10px 25px;}
.taxMonitor li{display: flex;justify-content: space-between;align-items: center;}
.taxMonitor .summary{display: block;margin: 10px 0;padding: 15px;background-color: #E4E4E4;}
.taxMonitor .summary ul{margin-top: 10px;}
.taxMonitor .summary li{padding: 10px;height: 50px;border: 1px solid #CBCBCB;color: #9A9A9A;background-color: #fff;}	/* transition 제거(티켓 25, M05 — 누르는 즉시 옮긴다) */
.taxMonitor .summary li a{flex: 1;display: flex;justify-content: space-between;align-items: center;}
.taxMonitor .summary li + li{margin-top: -1px;}
.taxMonitor .summary li .tax_name{display: flex;align-items: center;gap: 4px;font-size: 14px;color: #9A9A9A;}
.taxMonitor .summary li.on{position: relative;z-index: 1;border: 1px solid #4061CF;}	/* 겹친 테두리 위에 그린다 — 예전엔 다음 칸 margin-top 을 바꿔 칸들이 밀렸다(M05) */
.taxMonitor .summary li.line_through{position: relative;}
.taxMonitor .summary li.line_through:after{display: block;content:"";position: absolute;left: 38px;top: 50%;width: 80%;height: 1px;background-color: #f00;}
.taxMonitor .summary li .tax_how strong{margin-right: 0;text-align: right;line-height: 1;font-size: 17px;color: #000;}
.taxMonitor .col{padding: 15px 0;font-size: 14px;color: #202020;}
.taxMonitor .col:first-child{margin-right: 20px;border-bottom: 1px solid #B5B5B5;}
.taxMonitor .col .tit01{font-family: "NotoSansKR-Medium";font-size: 15px;color: #004098;}
.taxMonitor .col em{color: #BB2649;}
.taxMonitor .col .space_between > div{line-height: 2;}
.taxMonitor .col .btn_complete{margin: auto;width: 240px;height: 60px;color: #fff;background-color: #4061CF;}
.taxMonitor .btn_complete:hover, .taxMonitor .btn_complete:focus{background-color: #2e4591 !important;}
.taxMonitor .tit02{display: flex;justify-content: space-between;align-items: center;padding-bottom: 5px;border-bottom: 1px solid #000;margin-bottom: 10px;font-size: 20px;color: #202020;}
.taxMonitor .tit02 small{margin-left: 20px;font-family: "NotoSansKR-Regular";font-size: 14px;}
.taxMonitor .col .toggleWrap{transform: scale(80%);}
.taxMonitor .col .sum{font-family: "NotoSansKR-Medium";font-size: 20px;}

.family{display: flex;flex-wrap: wrap;align-items: center;gap: 10px;margin: 10px 0;padding: 15px 20px 15px 100px;width: 100%;min-height: 68px;border: 1px solid #707070;background: url(/img/ico_family.png) 50px center no-repeat;}
.family span{display: flex;justify-content: center;align-items: center;padding: 0 30px 0 30px;height: 35px;border: 1px solid #3B3B3B;border-radius: 10px;white-space: nowrap;font-size: 16px;cursor: pointer;}
.family span.check{padding: 0 30px 0 48px;background: url(/img/ico_check.png) 22px center no-repeat;}
.family span.on{border: 1px solid #4061CF;color: #fff;background: #4061CF;}
.family span.on.check{background: #4061CF url(/img/ico_check_on.png) 22px center no-repeat;}

.detailWrap{position: relative;margin-bottom: 10px;padding-bottom: 28px;width: 100%;min-height: 100px;}
.detailWrap .inner{display: flex;flex-direction: column;align-items: center;position: absolute;left: 0;top: 0;z-index: 10;width: 100%;border-bottom: 1px solid #707070;background-color: #E4E4E4;}
.detailWrap.on:after{display: block;content:"";position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: calc(100vh + 110px);background-color: rgba(0, 0, 0, .15);}
.detailWrap.on .inner{border: 1px solid #4061CF;text-align: center;background-color: #fff;box-shadow: 0 10px 12px rgba(0, 0, 0, .15);}
.detailWrap .inner .detail{display: flex;justify-content: space-around;padding: 0 100px;width: 100%;height: 75px;font-family: "NotoSansKR-Medium";font-size: 20px;}
.detailWrap .inner .detail b{margin-right: 20px;font-size: 17px;color: #004098;}
.detailWrap .inner .detail em{font-family: "NotoSansKR-Regular";margin-left: 6px;padding-top: 8px;font-size: 12px;color: #DF0B0B;}
.detailWrap .inner .btn_expand{display: flex;justify-content: center;gap: 8px;position: absolute;left: 50%;bottom: -28px;z-index: 10;width: 180px;height: 28px;border: 1px solid #707070;border-radius: 0 0 17px 17px;border-top: none;transform: translateX(-50%);color: #000;background-color: #E4E4E4;cursor: pointer;}
.detailWrap .inner .graphArea{display: none;margin: auto;padding: 30px 0;width: 100%;border-left: 1px solid #E4E4E4;border-right: 1px solid #E4E4E4;text-align: center;color: #000;background-color: #fff;}
.detailWrap.on .inner .btn_expand{border: 1px solid #4061CF;border-top: 1px solid #fff;background-color: #fff;}
.detailWrap.on .inner .btn_expand .icon_arr{transform: rotate(180deg);}

.cardWrap{position: relative;}
.cardWrap .btn_link{display: none;position: absolute;top: 33%;z-index: 1;width:76px;height: 92px;}
.cardWrap .btn_prev{left: -8px;background: url(/img/ico_prev.png) center no-repeat;}
.cardWrap .btn_next{right: 2px;background: url(/img/ico_next.png) center no-repeat;}
.cardWrap:hover .btn_link{display: block;}
/* 카드 이전/다음: 넘칠 때는 늘 보인다(티켓 28, S12-e3 — hover 때만이라 터치·키보드로 못 닿았다) */
.cardWrap.is-scrollable .btn_prev, .cardWrap.is-scrollable .btn_next{display: block;}
.cardWrap .summary{display: block;}
.cardWrap .head.withFixed{position: relative;height: 152px;padding-bottom: 60px;}
.cardWrap .fixed_area{display: flex;justify-content: space-between;align-items: center;position: absolute;left: 0;bottom: 0;padding: 0 20px;width: 100%;height: 60px;border-bottom: 1px solid #C6C6C6;font-family: "NotoSansKR-Medium";font-size: 15px;background-color: #f5f5f5;}
.cardGroup{display: flex;gap: 15px;padding: 0 3px 5px 2px;width: 100%;overflow: auto;}
.cardGroup.cardCenter{justify-content: center; }
.card{flex: 1;display: flex;flex-direction: column;justify-content: space-between;min-width: 368px;max-width: 500px;min-height: 810px;border-radius: 22px;border: 1px solid #CCCED4;}
.card.current{border: 2px solid #4061CF;}
.card .head{padding: 10px 15px;height: 92px;border-radius: 22px 22px 0 0;background-color: #D0DDE7;}
.card .head .name{flex: 1;font-size: 16px;}
.card .head .myCard{visibility: hidden;text-align: right;margin-top: 8px;}
.card.current .head .myCard{visibility: visible;}
.card .head .badge{display: inline-block;margin-top: 2px;margin-left: 30px;padding: 2px 10px;min-width: 80px;height: 30px;border-radius: 10px;text-align: center;font-size: 14px;color: #000;background-color: #fff;}
.card .head .payment{flex: 1;margin-top: 10px;text-align: right;font-size: 16px;}
.card .foot{height: 46px;border-radius: 0 0 22px 22px;background-color: #D0DDE7;}
.cardWrap .ul_card{}
.cardWrap .ul_card li{display: flex;flex-direction: column;gap: 10px;padding: 10px 16px;height: 100px;border-bottom: 1px solid #C6C6C6;color: #202020;}
.cardWrap .ul_card li:hover{background-color: #f2f7fa;}
.cardWrap .ul_card li .space_between{display: flex;gap: 15px;width: 100%;}
.cardWrap .ul_card li .label{display: flex;justify-content: center;align-items: center;width: 84px;height: 44px;line-height: 1.3;border: 1px solid #3B3B3B;border-radius: 10px;text-align: center;font-size: 13px;color: #3B3B3B;}
.cardWrap .ul_card li .label_1{display: flex;justify-content: center;align-items: center;width: 84px;height: 44px;line-height: 1.3;border: 1px solid #4061CF;border-radius: 10px;text-align: center;font-size: 13px;color: #4061CF;}
.cardWrap .ul_card li .label_2{display: flex;justify-content: center;align-items: center;width: 84px;height: 44px;line-height: 1.3;border: 1px solid #12B76A;border-radius: 10px;text-align: center;font-size: 13px;color: #12B76A;}
.cardWrap .ul_card li .label_3{display: flex;justify-content: center;align-items: center;width: 84px;height: 44px;line-height: 1.3;border: 1px solid #E9631B;border-radius: 10px;text-align: center;font-size: 13px;color: #E9631B;}
.cardWrap .ul_card li .label_1{border-color: #4061CF;color: #4061CF;}
.cardWrap .ul_card li .label_2{border-color: #12B76A;color: #12B76A;}
.cardWrap .ul_card li .label_3{border-color: #E9631B;color: #E9631B;word-break: keep-all;}
.cardWrap .ul_card li b{display: inline-block;overflow: hidden;width: 170px;white-space: nowrap;text-overflow: ellipsis;font-family: "NotoSansKR-Medium";font-size: 15px;}
.cardWrap .ul_card li b.txt_dimmed{color: #9B9B9B;}
.cardWrap .ul_card li small{margin-bottom: 3px;white-space: nowrap;font-family: "NotoSansKR-Regular";font-size: 12px;color: #9B9B9B;}
.cardWrap .ul_card{max-height: 620px;overflow-y: auto;}	/* 건수가 많으면 카드 안에서 스크롤(티켓 26, S16-d1 — 22건이면 카드가 2,439px 였다) */

.cardWrap .ul_card li .ellipsis{display: inline-block;overflow: hidden;max-width: 230px;white-space: nowrap;text-overflow: ellipsis;font-size: 12px;color: #6E6E6E;}
.cardWrap .ul_card li .label_gray{display: inline-flex;justify-content: center;align-items: center;padding: 0 10px;min-width: 95px;height: 26px;border-radius: 10px;font-size: 13px;color: #fff;background-color: #67778E;}
.cardWrap .ul_card li .label_green{display: inline-flex;justify-content: center;align-items: center;width: 70px;height: 26px;border-radius: 10px;font-size: 13px;color: #fff;background-color: #24C6CC;}

.registWrap{display: flex;flex-direction: column;gap: 15px;}
.registWrap .d_flex{gap: 15px}
.registWrap .th_label+.d_flex {gap: 4px;}
.registWrap .d_flex .bar{display: inline-block;width: 120px;height: 1px;background-color: #4061CF;}
.registWrap .toggleWrap{margin-top: 10px;}
.registWrap .radio_merge{margin-top: 10px;}
.registWrap .radio_merge input[type="radio"] + label{min-width: 34px;height: 26px;line-height: 23px;border-color: #585858;color: #000;}
.registWrap .radio_merge input[type="radio"]:checked + label{border-color: #585858;color: #fff;background-color: #585858;;}
.registWrap .radio_merge input[type="radio"]:first-child+ label {border-radius: 6px 0 0 6px;}
.registWrap .radio_merge input[type="radio"] + label:last-child {border-radius: 0 6px 6px 0;}
.switchWrap .switch{display: flex;gap: 20px;align-items: center;}
.switchWrap .switch a{display: block;padding-left: 26px;font-family: "NotoSansKR-Medium";font-size: 14px;color: #004098;background: #D0DDE7 url(/img/ico_check_off.png) left center no-repeat;}
.switchWrap .switch a.on{background: #D0DDE7 url(/img/ico_check_on.png) left center no-repeat;}
.switchWrap .preview img{overflow: hidden;max-width: 100%;border-radius: 20px;text-align: center;}
.switchWrap .registWrap{display: none;padding-top: 20px;}
.switchWrap .registWrap.active{display: flex;}

.resultData{}
.resultData .item{display: flex;}
.resultData .item:last-child .calculateWrap{padding: 20px 20px 30px 30px;}
.resultData .item .category{display: flex;justify-content: space-between;padding: 20px 90px 20px 20px;width: 300px;border-bottom: 1px solid #E4E4E4;font-family: "NotoSansKR-Medium";font-size: 20px;}
.resultData .item .category b{margin-bottom: 10px;font-weight: 400;font-family: "NotoSansKR-Regular";font-size: 24px;color: #004098;}
.resultData .item .calculateWrap{flex: 1;padding: 20px 20px 0 30px;background-color: #E4E4E4;}
.resultData .item .well{display: flex;justify-content: space-between;position: relative;padding: 10px 100px;width: 100%;border: 1px solid #707070;background-color: #fff;}
.resultData .item .well:after{display: block;content:"";position: absolute;left: -22px;top: 30px;z-index: 1;width: 22px;height: 48px;background: url(/img/bg_cate.png) 0 0 no-repeat;}
.resultData .item .well dl{display: flex;width: 700px;border-bottom: 1px solid #707070;}
.resultData .item .well dt{flex: 1;height: 34px;text-align: center;line-height: 34px;font-size: 17px;}
.resultData .item .well dd{flex: 1;text-align: right;line-height: 34px;}
.resultData .item .well table{width: 700px;margin-top: 20px;}
.resultData .item .well table th, .resultData .item .well table td{padding: 0 20px;height: 34px;padding: 0 20px;line-height: 34px;font-size: 16px;color: #2f2f2f;}
.resultData .item .well table thead th, .resultData .item .well table thead td{text-align: right;border-bottom: 1px solid #707070;}
.resultData .item .well table thead th{position: relative;font-weight: 500;font-family: "NotoSansKR-Medium";color: #4061CF;background-color: #D0DDE7;}
.resultData .item .well table thead th:after{display: block;content:"";position: absolute;right: 0;top: 0;width: 2px;height: 34px;background-color: #fff;}
.resultData .item .well table thead th:last-child:after{display: none;}
.resultData .item .well table thead td{font-family: "NotoSansKR-Medium";}
.resultData .item .well table tbody th{text-align: right;font-weight: normal;font-family: "NotoSansKR-Regular";color: #4061CF;}
.resultData .item .well table tbody td{text-align: right;font-family: "NotoSansKR-Regular";}
.resultData .item .minus.none .icon_minus{display: none !important;}
.resultData .item .graphArea{display: flex;align-items: center;}

/* aside 인사정보조회 */
.asideWrap{position: fixed;right: 10px;top: 61px;z-index: 999;width: 240px;height: calc(100% - 61px);border-left: 1px solid #d5d5d5;background-color: #fff;transition: .3s;}
.asideWrap.fold{right: -240px;}
.asideWrap.fold .btn_aside_toggle{left: -29px;} /* 접혔을 때 패널 테두리 1px 만큼 화면 밖으로 나가지 않게 */
.asideWrap.fold .aside{visibility: hidden;transition: visibility 0s .3s;}
.asideWrap .btn_aside_toggle{position: absolute;left: -28px;top: 40%;width: 28px;height: 80px;border: 1px solid #d5d5d5;border-right: 1px solid #fff;border-radius: 8px 0 0 8px;text-indent: -9999px;background: #fff url(/img/aside_arr2.png) 10px center no-repeat;}
.asideWrap .btn_aside_toggle.fold{background: #fff url(/img/aside_arr1.png) 10px center no-repeat}
.asideWrap .aside{display: flex;flex-direction: column;overflow: hidden;padding: 20px;height: 100%;}
.asideWrap .aside b{display: block;margin-top: 10px;font-family: "NotoSansKR-Medium";font-size: 13px;}
.asideWrap .aside b.aside_tit{margin-bottom: 10px;padding-bottom: 5px;border-bottom: 1px solid #d5d5d5;font-size: 16px;color: #004098;}
.asideWrap .aside select{width: 100%;} 
.asideWrap .aside .organTree{flex: 1;overflow: auto;padding: 10px;border: 1px solid #e9e9e9;}

/* 아이콘 */
.cntYETA i{display: inline-block;}
.cntYETA .icon_dataIn{margin-right: 4px;width: 24px;height: 24px;background: url(/img/ico_dataIn.png) center no-repeat;}
.cntYETA .icon_tax01{width: 25px;height: 25px;background: url(/img/ico_tax01.png) center no-repeat;}
.cntYETA .icon_tax02{width: 25px;height: 25px;background: url(/img/ico_tax02.png) center no-repeat;}
.cntYETA .icon_tax03{width: 25px;height: 25px;background: url(/img/ico_tax03.png) center no-repeat;}
.cntYETA .icon_tax04{width: 25px;height: 25px;background: url(/img/ico_tax04.png) center no-repeat;}
.cntYETA .icon_tax05{width: 25px;height: 25px;background: url(/img/ico_tax05.png) center no-repeat;}
.cntYETA .icon_tax06{width: 25px;height: 25px;background: url(/img/ico_tax06.png) center no-repeat;}
.cntYETA .icon_tax07{width: 25px;height: 25px;background: url(/img/ico_tax07.png) center no-repeat;}
.cntYETA .icon_tax08{width: 25px;height: 25px;background: url(/img/ico_tax08.png) center no-repeat;}
.cntYETA .icon_tax09{width: 25px;height: 25px;background: url(/img/ico_tax09.png) center no-repeat;}
.cntYETA .icon_tax10{width: 25px;height: 25px;background: url(/img/ico_tax10.png) center no-repeat;}

.cntYETA .on .icon_tax01{width: 25px;height: 25px;background: url(/img/ico_tax01_on.png) center no-repeat;}
.cntYETA .on .icon_tax02{width: 25px;height: 25px;background: url(/img/ico_tax02_on.png) center no-repeat;}
.cntYETA .on .icon_tax03{width: 25px;height: 25px;background: url(/img/ico_tax03_on.png) center no-repeat;}
.cntYETA .on .icon_tax04{width: 25px;height: 25px;background: url(/img/ico_tax04_on.png) center no-repeat;}
.cntYETA .on .icon_tax05{width: 25px;height: 25px;background: url(/img/ico_tax05_on.png) center no-repeat;}
.cntYETA .on .icon_tax06{width: 25px;height: 25px;background: url(/img/ico_tax06_on.png) center no-repeat;}
.cntYETA .on .icon_tax07{width: 25px;height: 25px;background: url(/img/ico_tax07_on.png) center no-repeat;}
.cntYETA .on .icon_tax08{width: 25px;height: 25px;background: url(/img/ico_tax08_on.png) center no-repeat;}
.cntYETA .on .icon_tax09{width: 25px;height: 25px;background: url(/img/ico_tax09_on.png) center no-repeat;}
.cntYETA .on .icon_tax10{width: 25px;height: 25px;background: url(/img/ico_tax10_on.png) center no-repeat;}
.cntYETA .on .icon_noti{width: 25px;height: 25px;background: url(/img/ico_noti_on.png) center no-repeat; background-size: contain;}


.cntYETA .icon_taxadd{margin-right: 6px;width: 44px;height: 44px;background: url(/img/emo_smile.png) center no-repeat;}
.cntYETA .tax_add.more .icon_taxadd{margin-right: 6px;width: 44px;height: 44px;background: url(/img/emo_sad.png) center no-repeat;}
.cntYETA .icon_check{width: 25px;height: 20px;background: url(/img/ico_check.png) left center no-repeat}
.cntYETA .icon_mycard{width: 20px;height: 20px;background: url(/img/ico_mycard.png) 0 0 no-repeat}
.cntYETA .icon_tit01{width: 38px;height: 38px;background: url(/img/ico_tit01.png) center no-repeat;}
.cntYETA .icon_tit02{width: 25px;height: 25px;background: url(/img/ico_tit02.png) center no-repeat;}
.cntYETA .icon_tit03{width: 25px;height: 25px;background: url(/img/ico_tit03.png) center no-repeat;}
.cntYETA .icon_attatch{margin-right: 10px;width:47px;height: 47px;background: url(/img/ico_attatch.png) center no-repeat;}
.cntYETA .icon_minus{width: 47px;height: 47px;background: url(/img/ico_minus.png) center no-repeat;}
.cntYETA .icon_person{width: 22px;height: 22px;background: url(/img/ico_person.png) center no-repeat;}
.cntYETA .icon_equal{width: 47px;height: 47px;background: url(/img/ico_equal.png) center no-repeat;}
.cntYETA .icon_arr{width: 24px;height: 24px;background: url(/img/ico_arr.png) center no-repeat;}
.cntYETA .btn_date{width: 24px;height: 24px;background: url(/img/ico_calendar.png) center no-repeat;}
.cntYETA .btn_modify{width: 24px;height: 24px;background: url(/img/ico_modify.png) center no-repeat;}
.cntYETA .btn_delete{width: 40px;height: 40px;border-radius: 10px;background: url(/img/ico_delete.png) center no-repeat;}
.cntYETA .btn_delete:hover, .cntYETA .btn_delete:focus{background: #fff url(/img/ico_delete.png) center no-repeat;}
.cntYETA .btn_del{width: 30px;height: 30px;background: url(/img/ico_del.png) left center no-repeat;}
.cntYETA .btn_search{width:39px;height: 31px;background: url(/img/ico_search.png) center no-repeat;}
.cntYETA .btn_add{width:100%;height: 100px;margin-top: -1px;border-top: 1px dashed #707070;background: #fff url(/img/ico_add.png) center no-repeat;text-indent: -9999px;}
.cntYETA .btn_q{margin: -3px 0 0 3px;width: 13px;height: 12px;background: url(/img/ico_q.png) center no-repeat;}
.cntYETA .btn_q2{position: relative;display:inline-block;width: 20px;height: 20px;background: #4061cf;margin-left: 5px;border-radius: 50%;text-align: center;cursor: pointer;}
.cntYETA .btn_q2:after{content: '?';color: #FFF;font-size: 13px;line-height: 20px;height: 20px;display: block;}
.cntYETA .btn_history{display: inline-block;margin-top: 2px;width: 160px;height: 30px;border: 1px solid #3B3B3B;border-radius: 10px;text-align: center;font-size: 14px;color: #000;background-color: #fff;}

 
 /* 로그인 */
.logArea{margin: auto;width: 100%;max-width: 1920px;height: 100%;background: url(/img/log_img.jpg) center no-repeat;}
.logArea .logWrap{padding: 70px 100px 0;width: 580px;height: 100%;background-color: rgba(255, 255, 255, .87);}
.logWrap h1{padding-top: 185px;font-family: "NotoSansKR-Medium";font-size: 24px;color: #000;background: url(/img/log_head.png) 0px 80px no-repeat;}
.logWrap h1 .d_flex{}
.logWrap h1 .d_flex em{color: #9A1F1F;}
.logWrap .logBox .space_between{margin-bottom: 30px;gap: 10px;}
.logWrap .logBox{margin-top: 180px;}
.logWrap .logBox .txt{margin-bottom: 15px;font-size: 16px;}
.logWrap .logBox small{display: inline-block;width: 90px;margin-bottom: 5px;text-align: center;line-height: 34px;font-family: "NotoSansKR-Regular";font-size: 13px;color: #707070;}
.logWrap .logBox input{width: 100%;height: 40px;border: none;border-bottom: 1px solid #707070;font-size: 16px;background: none;}
.logWrap .btn_cert{width: 90px;height: 34px;border-radius: 10px;font-family: "NotoSansKR-Medium";font-size: 16px;color: #fff;background-color: #4061CF;}
.logWrap .btn_cert:hover, .logWrap .btn_cert:focus{background-color: #2e4591 !important;}
.logWrap .btn_login {display: block;margin-top: 60px;width: 100%;height: 46px;line-height: 46px;border-radius: 25px;text-align: center;font-family: "NotoSansKR-Regular";font-size: 16px;color: #fff;background-color: #D10F3C;cursor: pointer;}
.logWrap .btn_login:hover{background-color: #000;}


/* 기타 */
::-webkit-scrollbar {width: 10px;height: 10px;}
::-webkit-scrollbar-thumb {background-color: #c1c1c1;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;border: 1px solid #fff;}
::-webkit-scrollbar-track {background-color: #f1f1f1;}


.yetaFileUpload {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 5px;
  background-color: var(--vivaLight);
  border: 2px dashed var(--viva);
  transition: all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
  cursor: pointer;
}
.yetaFileUpload .fileIcons {
  display: inline-block;
  margin-bottom: 10px;
  transition: all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.yetaFileUpload .fileIcons span {
  font-size: 50px;
  color: var(--viva);
  border-radius: 50%;
  padding: 6px;
  cursor: pointer;
}
.yetaFileUpload .fileIcons span:hover {
  color: var(--vivaDark);
}
.yetaFileUpload .fileInput {
  text-align: center;
}
.yetaFileUpload .fileInput input[type=file] {
  display: none;
}
.yetaFileUpload .fileInput span {
  font-family: 'Pretendard-Bold';
  color: var(--viva);
  cursor: pointer;
  font-size: 21px;  
}
.yetaFileUpload .fileInput span:hover {
  color: var(--vivaDark);
}
.yetaFileUpload .fileInput label {
  font-family: 'Pretendard-Medium';
  font-size: 20px;  
  color: #4c4c4c;
  margin-bottom: 5px;
}
.yetaFileUpload .fileInput p {
  font-family: 'Pretendard-Medium';
  font-size: 15px;  
  color: #767676;
  margin-top: 5px;
}
.yetaFileUpload.dragover {
  border: 2px solid var(--blue2);
  background-color: #bbdefb;
}
.yetaFileUpload.dragover .fileIcons {
  transform: scale(3) translate(0px, 10px);
  color: var(--blue2);
}
.yetaFileUpload.dragover .fileInput {
  visibility: hidden;
}

/* 다음 단계 버튼 (티켓 22): 목적지를 글자로 쓴 알약 버튼. 예전엔 아이콘만 있는 60px 원 + :after 말풍선 "다음 단계" */
.fixedNextBtn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 997;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 18px 0 22px !important;
  border: 0;
  border-radius: 24px;
  background: var(--orange);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  color: #fff;
  font-family: "NotoSansKR-Medium";
  font-size: 16px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-hover);
}
.fixedNextBtn i {
  font-size: 22px;
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .fixedNextBtn:hover { background: #c94600; }
}

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -20px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -10px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -20px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -10px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.fixedNextBtn.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  animation-iteration-count: 2;	/* 저장 뒤 "다음으로" 신호 — 두 번만(예전: 화면을 떠날 때까지 무한, M01) */
  -webkit-animation-iteration-count: 2;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
}
.material-tooltip {
  text-align: left;
}
.cntYETA .datepicker-modal {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.cntYETA .datepicker-modal .datepicker-date-display {
  padding: 20px 22px !important;
}
.cntYETA .datepicker-modal .datepicker-controls,.cntYETA .datepicker-modal .datepicker-table {
  margin: 0 auto !important;
}
.cntYETA .datepicker-modal .btn-flat {
  padding: 0 1rem !important;
}


.guide.form{
	margin-top: 0px;
	margin-bottom: 15px;
}
.guide.form .guideBtn{
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: 0;
	vertical-align: middle;
	text-decoration: none;
	background: transparent;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
    margin-bottom: 3px;
}
.guide.form .guideBtn {
	width: 11rem;
	height: auto;
    margin-right: 10px;
}
.guide.form .guideBtn.w12 {
	width: 12rem;
}
.guide.form .guideBtn.w13 {
	width: 13rem;
}
.guide.form .guideBtn.w14 {
	width: 14rem;
}
.guide.form .guideBtn.w15 {
	width: 15rem;
}
.guide.form .guideBtn.w16 {
	width: 16rem;
}
.guide.form .guideBtn.w20 {
	width: 20rem;
}
.guide.form .guideBtn.w21 {
	width: 21rem;
}
.guide.form .guideBtn .circle {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: relative;
	display: block;
	margin: 0;
	width: 25px;
	height: 25px;
	background: #1859A7;
	border-radius: 1.625rem;
}
.guide.form .guideBtn .circle .icon {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #fff;
}
.guide.form .guideBtn .circle .icon.arrow {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	width: 1.125rem;
	height: 0.125rem;
	background: none;
}
.guide.form .guideBtn .circle .icon.arrow::before {
	position: absolute;
	content: "";
	top: -0.22rem;
	right: 0rem;
	width: 0.625rem;
	height: 0.625rem;
	border-top: 0.185rem solid #fff;
	border-right: 0.185rem solid #fff;
	transform: rotate(45deg);
}
.guide.form .guideBtn .button-text {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.1rem 0;
	margin: 0 0 0 2.5rem;
	color: #1859A7;
	font-weight: 200;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
    text-align: left;
}
.guide.form .guideBtn:hover .circle {
	width: 100%;
}
.guide.form .guideBtn:hover .circle .icon.arrow {
	background: #fff;
	transform: translate(1rem, 0);
}
.guide.form .guideBtn:hover .button-text {
	color: #fff;
}

.typing-box {
  margin-top: 20px;
  margin-bottom: 20px;
}
.word-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  margin: 5px !important;
  padding: 5px !important;
  border: 2px dashed #ccc;
  border-radius: 8px;
}
.typing-box .typingInput {
  padding: 2px !important;
  font-size: 16px !important;
  text-align: center !important;
  border: 2px solid #ccc !important;
  border-radius: 4px !important;
  outline: none !important;
  transition: border-color 0.3s !important;
  height: 25px !important;
}
.typing-box .typingInput[len="1"] {
  width: 20px;
}
.typing-box .typingInput[len="2"] {
  width: 40px;
}
.typing-box .typingInput[len="3"] {
  width: 55px;
}
.typing-box .typingInput[len="4"] {
  width: 70px;
}
.typing-box .typingInput[len="5"] {
  width: 85px;
}
.typing-box .typingInput[len="6"] {
  width: 95px;
}
.typing-box .typingInput.suc {
  border: 2px solid green !important;
}
.typing-box .typingInput.err {
  border: 2px solid red !important;
}
.typing-box span {
  font-size: 18px;
  color: #575757;
}
.signRegBox {
  position: relative;
  display: flex;
  gap: 30px;
  border-top: 1px dashed #CCC;
  margin-top: 20px;
  padding-top: 20px;
}
.signRegBox::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: white; /* 투명도를 조절할 가림막 */
    
    /* 마스크(양쪽 끝을 투명하게) */
    mask-image: linear-gradient(to right, #FFF, transparent 20%, transparent 80%, #FFF);
    -webkit-mask-image: linear-gradient(to right, #FFF, transparent 20%, transparent 80%, #FFF);
    
    pointer-events: none; /* 클릭 이벤트 방해 방지 */
}

.signRegBox .signArrow {
  position: relative;
  top: 8%;
  left: 3%;
  transform: rotate(270deg);
  cursor: pointer;
}
.signRegBox .signArrow span {
  display: block;
  width: 0.9vw;
  height: 0.9vw;
  border-bottom: 5px solid #626262;
  border-right: 5px solid #626262;
  transform: rotate(45deg);
  margin: -10px;
  animation: animate 2s infinite;
}
.signRegBox .signArrow span:nth-child(2) {
  animation-delay: -0.2s;
}
.signRegBox .signArrow span:nth-child(3) {
  animation-delay: -0.4s;
}
@keyframes animate {
  0% {
      opacity: 0;
      -webkit-transform: rotate(45deg) translate(-20px, -20px);
      transform: rotate(45deg) translate(-20px, -20px);
  }
  50% {
      opacity: 1;
  }
  100% {
      opacity: 0;
      -webkit-transform: rotate(45deg) translate(20px, 20px);
      transform: rotate(45deg) translate(20px, 20px);
  }
}
.signRegBox .signImgBox {
  display: inline-flex;
}
.signRegBox .signBox {
  display: inline-block;
}
.signRegBox .signBox img {
  width: 200px;
  height: 110px;
  object-fit: scale-down;
  background: #FFF;
}
.signRegBox .signBox.f1 {
  flex: 1;	
  display: flex;
  gap: 20px;
  align-items: end;
  justify-content: end;
}

/* ==========================================================================
   공통 바닥 (티켓 13) — 이 파일 맨 끝에 둬서 앞의 모든 규칙(materialize·common_hr_new 포함) 뒤에 온다.
   토큰(--ease-*, --dur-*, --focus-ring)은 common_hr_new.css 의 :root.
   hover 로 움직이거나 색이 바뀌는 규칙은 @media (hover: hover) and (pointer: fine) 안에 둔다
   (폰은 탭을 hover 로 착각해 상태가 남는다). 예: common_hr_new.css 의 .rc_modal_no:hover
   ========================================================================== */

/* 키보드 초점 고리: 마우스 클릭에는 안 보이고 Tab 으로 왔을 때만 */
:is(a, button, select, summary, [role="button"], [tabindex]):focus-visible,
input[type="radio"]:focus-visible + label,
input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* 칸 검증 오류 (티켓 17, hrCommon.js fieldError) — 칸 강조 + 칸 아래 문구. 색만으로 알리지 않게 문구가 항상 같이 나온다 */
input.is-invalid, textarea.is-invalid, .select-wrapper.is-invalid input.select-dropdown {
  border-color: var(--error) !important;
  box-shadow: 0 1px 0 0 var(--error) !important;
}
.is-invalid:not(input):not(textarea):not(.select-wrapper) {
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--error);
}
.fieldErr {
  display: block;
  margin: 4px 0 0;
  color: var(--error);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}

/* 요약 패널 금액이 바뀌면 그 칸만 잠깐 배경색(티켓 25, M02 — 카운트업 대신). 켤 때는 바로, 끌 때 200ms */
[id^="SUM_"] { border-radius: 4px; transition: background-color var(--dur-base) var(--ease-hover); }
[id^="SUM_"].is-updated { background-color: #fff1b8; transition: none; }

/* 권한자 패널 검색 결과: 한 사람이 어디서 끝나는지 보이게(티켓 26, S02-d4) */
#ulTargetList li { padding: 8px 12px; border-bottom: 1px solid #eee; line-height: 1.4; }

/* 기본정보 (티켓 29, S08-a5·a6) — 토글 거절·연쇄 해제 안내 한 줄 / 인적공제 변동여부 즉시 저장 결과 */
.toggleNote { margin: 6px 0 0; padding: 6px 10px; border-radius: 4px; background: #fff7ec; font-size: 13px; line-height: 1.5; color: #8a4b00; word-break: keep-all; }
.saveStatus { margin-left: 12px; font-size: 13px; color: #2e7d32; white-space: nowrap; }
.saveStatus.is-error { color: #c0392b; }

/* 신용카드 국세청 칸 (티켓 29, S15-a2) — 그밖의 자료와 구분되는 바탕, 불러온 값과 다르면 주황 테두리 + "수정됨" */
.tbl_card input.ntsVal { background-color: #f1f4f8; }
.tbl_card td:has(> input.ntsVal.is-edited) { position: relative; }
.tbl_card input.ntsVal.is-edited { border-bottom: 2px solid #e67e22; background-color: #fff7ec; }
.tbl_card td:has(> input.ntsVal.is-edited)::after { content: "수정됨"; position: absolute; right: 6px; top: 1px; font-size: 10px; line-height: 1; color: #c05f00; }

/* 기부금 레이어 [표에 추가] (티켓 29, L5-a2) — 주 버튼은 아래 [저장] 하나. 추가는 테두리만 있는 보조 버튼 */
.btn.btn_add_row { border: 1px solid #4061CF; color: #4061CF; background: #fff; }

/* 주택 차입금 방식 (티켓 29, L4-a3) — 하나만 고르는 선택이라 체크박스(ico_check) 대신 라디오 모양. 개인간 차입이 안 되는 사람은 흐리게 */
.switchWrap .switch a, .switchWrap .switch a.on { position: relative; background-image: none; }
.switchWrap .switch a::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid #004098; border-radius: 50%; background: #fff; box-sizing: border-box; }
.switchWrap .switch a.on::before { background: radial-gradient(circle, #004098 0 3.5px, #fff 4.5px); }
.switchWrap .switch a.is-disabled { opacity: 0.45; cursor: not-allowed; }
.switchWrap > .card > .fieldErr { padding: 8px 60px 0; }	/* 개인간 차입 거절 이유 — 아래 입력 칸과 같은 들여쓰기 */

/* 국세청자료 업로드 결과 금액 (티켓 29, S09-a3) — 확인만 하는 값이라 입력칸 모양이 아니라 글자 + 원 */
.pdfAmt { display: block; padding: 4px 16px 6px; text-align: right; font-family: "NotoSansKR-Bold"; font-size: 20px; line-height: 1.3; color: #202020; font-variant-numeric: tabular-nums; }
.pdfAmt.has-unit::after { content: " 원"; font-family: "NotoSansKR-Regular"; font-size: 14px; color: #555; }

/* 교육비 (티켓 29, S14) — 흐린 칩: 입력 대상이 아닌 가족(직계존속). 누르면 이유를 알린다 / 행 라벨의 연 한도 / 카드 아래 한도 초과·안내 */
.family span.is-disabled { opacity: 0.45; border-style: dashed; cursor: not-allowed; }
.tbl_card .eduLimit { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #666; white-space: nowrap; }
#eduFamCard .card .foot { display: flex; flex-direction: column; justify-content: center; height: auto; min-height: 46px; padding: 6px 20px; font-size: 13px; line-height: 1.5; color: #333; word-break: keep-all; }
#eduFamCard .card .foot .eduOver { color: #c0392b; }
.eduNote { margin: -4px 0 10px; font-size: 13px; color: #666; }

/* 잠긴 단계 탭 (티켓 22) — 기본정보를 저장하기 전 2~5단계. 누르면 이유를 알린다 */
.tabHeader .tabLink a.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 결과 화면 요약 띠 (티켓 23, js/result/resultHero.js) — 환급/추가 납부를 맨 위에 문구 + 절댓값으로, 스크롤해도 위에 남는다.
   환급=파랑, 추가 납부=주황, 0=회색(예전: 셋 다 빨강 — 빨강은 오류 신호다) */
.resultHero {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 20px;
  row-gap: 4px;
  margin: 0 0 24px;
  padding: 18px 24px;
  border: 1px solid #d6dde8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.resultHero:empty { display: none; }
.cntYETA .tabArea .tabContent.has-sticky { overflow: clip; }	/* :122 의 overflow:hidden 보다 구체적으로 */
.resultHero p { margin: 0; }
.resultHero__label { font-family: "NotoSansKR-Medium"; font-size: 22px; color: #333; }
.resultHero__amount { font-size: 22px; color: #333; }
.resultHero__amount strong { margin-right: 4px; font-size: 38px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.resultHero__sub { flex-basis: 100%; font-size: 15px; color: #555; }
.resultHero__note { flex-basis: 100%; font-size: 13px; color: #777; }
.resultHero.is-refund .resultHero__amount strong { color: #1565c0; }
.resultHero.is-due .resultHero__amount strong { color: #e65100; }
.resultHero.is-pending, .resultHero.is-empty, .resultHero.is-zero { background: #f7f8fa; }
/* 계산 근거의 "차감징수액" 줄도 같은 색(인라인 color:red 를 덮는다) */
#spPreTaxSum.is-refund { color: #1565c0 !important; }
#spPreTaxSum.is-due { color: #e65100 !important; }
#spPreTaxSum.is-zero { color: #555 !important; }
/* 결과가 없으면 "-" 로 가득 찬 표를 접는다(S22-a1) */
.resultData.is-empty { display: none; }
/* 왼쪽 "=" 아이콘이 "근로소득금액 − 공제 = 산출세액", "산출세액 − 세액공제 = 차감징수액" 처럼 틀린 식으로 읽혀 지운다(S20-a2).
   실제는 과세표준 × 세율 = 산출세액, 결정세액 − 기납부세액 = 차감징수액. 빼기(−) 아이콘은 공제 단계라 남긴다 */
.resultData .icon_equal { visibility: hidden; }

/* 도움말 ? — 20px 동그라미는 그대로, 누를 수 있는 범위만 44px(티켓 28) */
.cntYETA .btn_q2::before {
  content: "";
  position: absolute;
  inset: -12px;
}

/* 저장 대기 (티켓 18, hrCommon.js yetaPending) — 누른 버튼이 "저장 중…" 이 되고 다시 눌리지 않는다 */
.is-pending {
  cursor: progress !important;
  opacity: 0.6;
}

/* 입력 기간 밖·읽기 전용 (티켓 19, hrCommon.js applyInputPermission) — 이유를 적은 띠 + 칸은 편집할 수 없는 모양 */
.readonlyBanner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 24px;
  border-bottom: 1px solid #f3c58a;
  background: #fff6e8;
  color: #7a4300;
  font-size: 15px;
  line-height: 1.5;
}
.readonlyBanner .material-icons { font-size: 20px; }
body.is-readonly :is(.cntYETA, .layerPop) :is(input, textarea):disabled {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  background: transparent;
  color: #555;
  -webkit-text-fill-color: #555;
  cursor: default;
}
body.is-readonly .toggleWrap,
body.is-readonly .switch a[name="regCheck"] {
  pointer-events: none;
  opacity: 0.55;
}
/* 등록 레이어 제목 옆 "조회 전용" — 본문 띠는 레이어의 어두운 막 뒤에 가려진다 (L3-d2) */
body.is-readonly .layerPop:not(#noti_layer) .popHeader h4::after {
  content: "조회 전용";
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fff6e8;
  color: #7a4300;
  font-size: 13px;
  vertical-align: middle;
}
/* 메인 주 버튼 아래 안내 (입력 기간 밖) */
.basicBtnHint {
  margin-top: 8px;
  color: #7a4300;
  font-size: 14px;
  line-height: 1.5;
}
/* 목록을 다시 그려도 숨어 있게 CSS 로 — 증빙 [제출]·[Upload]·기타증빙 [Delete] */
body.is-readonly button[onclick*="fileUploadCheck"],
body.is-readonly .btn_delete2 {
  display: none !important;
}

/* ==========================================================================
   모션 정리 P2 (티켓 25) — 원래 규칙은 두고 여기서 덮는다. 곡선·시간은 :root 토큰(티켓 13)
   ========================================================================== */
/* M06 공제 탭 안내 버튼: all 0.45s(폭 확장) → 폭만 --dur-base 강한 ease-out, hover 기기에서만 펼친다 */
.guide.form .guideBtn .circle,
.guide.form .guideBtn .circle .icon,
.guide.form .guideBtn .circle .icon.arrow,
.guide.form .guideBtn .button-text { transition: none; }
@media (hover: hover) and (pointer: fine) {
  .guide.form .guideBtn .circle { transition: width var(--dur-base) var(--ease-out); }
  .guide.form .guideBtn .circle .icon.arrow,
  .guide.form .guideBtn .button-text { transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-hover); }
}
/* M13 토글 손잡이: left 이동(all .2s) → transform 160ms */
.toggleWrap .toggle { left: -1px; transition: transform 160ms var(--ease-in-out); }
.toggleWrap.on .toggle { left: -1px; transform: translateX(29px); }
/* M14 권한자 패널: right 이동(all .3s) → transform, 서랍 곡선 */
.asideWrap { right: 10px; transition: transform var(--dur-slow) var(--ease-drawer); }
.asideWrap.fold { right: 10px; transform: translateX(250px); }
/* M15 끌어다 놓기: all 0.5s·아이콘 3배 → 테두리·배경 150ms, 아이콘 살짝(1.15) */
.yetaFileUpload { transition: border-color var(--dur-fast) var(--ease-hover), background-color var(--dur-fast) var(--ease-hover); }
.yetaFileUpload .fileIcons { transition: transform var(--dur-fast) var(--ease-out); }
.yetaFileUpload.dragover .fileIcons { transform: scale(1.15); }
/* M16 체크박스: jelly 0.6s 과장 튐 → 없앤다(체크 표시는 그대로) / 헤더 아이콘 hover jelly 도 */
.cbxBox input[type=checkbox]:checked ~ .cbx, nav .btnArea .btnBox i:hover { animation: none; }
/* M18 업로드 아이콘 펄스·서명 화살표: 무한 → 3번 */
.hPulse, .hPulseBlue, .hPulseGreen, .hPulseViva, .hPulseViva1s, .hPulseBorder,
.hPulse::before, .hPulseBlue::before, .hPulseGreen::before, .hPulseViva::before, .hPulseViva1s::before, .hPulseBorder::before,
.signRegBox .signArrow span { animation-iteration-count: 3 !important; }

/* ==========================================================================
   폰 배치 (티켓 24) — 768px 미만. 데스크톱(1280~1920, 티켓 14)은 그대로 두고 여기서만 한 열로
   ========================================================================== */
@media (max-width: 767px) {
  .cntYETA .btn_save.large { align-self: stretch; width: 100%; }
  .cntYETA { min-width: 0; }
  /* 입력은 16px 이상 — iOS 는 그보다 작은 칸에 초점이 가면 화면을 확대한다(G4-X7) */
  .cntYETA input, .cntYETA select, .cntYETA textarea, .layerPop input, .layerPop textarea { font-size: 16px !important; }

  /* 단계 탭: 한 줄 가로 스크롤(예전: 1050px 고정 — 글자가 한 자씩 접혔다) */
  .cntYETA .tabArea .tabHeader { justify-content: flex-start; height: auto; padding: 8px 12px; overflow-x: auto; }
  .cntYETA .tabProcess .tabLink { width: auto; height: 56px; gap: 18px; flex-wrap: nowrap; }
  .cntYETA .tabProcess .tabLink a { flex: none; white-space: nowrap; }
  .cntYETA .tabProcess .tabLink a + a:before { display: none; }
  .cntYETA .tabProcess .tabLink a span { font-size: 14px; }
  .cntYETA .tabYETA .tabLink { gap: 12px; }
  .cntYETA .tabYETA .tabLink a { gap: 0; padding-left: 0; min-width: 0; height: auto; font-size: 15px; background: none !important; }
  .cntYETA .tabYETA .tabLink a + a:before { display: none; }

  /* 흰 판·제목 */
  .cntYETA .tabYETA .tabPane { padding: 0 0 100px; }
  .cntYETA .row { padding: 16px 16px 24px; }
  .cntYETA .title { font-size: 22px; flex-wrap: wrap; }
  .cntYETA .subTit, .cntYETA .tit02 { flex-wrap: wrap; row-gap: 8px; }
  .cntYETA .subTit .btnGroup { flex: 1 1 100%; }
  .cntYETA .tablHeader { flex-wrap: wrap; row-gap: 8px; }
  .cntYETA .tablHeader .btnGroup { flex: 1 1 100%; }

  /* 메인: 왼쪽 칸과 금액 표를 위아래로 */
  .cntYETA .summary { flex-direction: column; gap: 24px; padding: 16px; }
  .cntYETA .tabYETA .summary .wd380px { width: auto !important; max-width: 100%; }
  .cntYETA .summary h2 { font-size: 26px; }
  .cntYETA .summary h2 b { font-size: 30px; }
  .cntYETA .summary h2 small, .cntYETA .summary h2 em { font-size: 18px; }
  .summary li .tax_name { font-size: 16px; }
  .summary li .tax_how strong { font-size: 20px; }
  .summary .tax_add { font-size: 20px; flex-wrap: wrap; }
  .summary .tax_add .tax_how strong { font-size: 28px; }
  .summary .btn_dataIn { font-size: 18px; }

  /* 공제 화면: 요약 패널을 위로, 카드는 가로 스크롤(한 장씩) */
  .taxMonitor { flex-direction: column; overflow: visible; }
  .taxMonitor > div:first-child { width: 100%; border-right: 0; border-bottom: 1px solid #707070; }
  .taxMonitor > div:last-child { padding: 10px 0; }
  .cardGroup { scroll-snap-type: x mandatory; }
  .cardGroup > .card { flex: none; width: min(340px, calc(100vw - 48px)); scroll-snap-align: start; }

  /* 결과: 항목 이름과 계산 근거를 위아래로, 넓은 표는 그 안에서 가로 스크롤 */
  .resultData .item { flex-direction: column; }
  .resultData .item .category { width: auto; padding: 16px; }
  .resultData .item .calculateWrap { padding: 12px; overflow-x: auto; }
  .resultData .item .well { padding: 10px 12px; width: max-content; min-width: 100%; }
  .resultData .item .well:after { display: none; }
  .resultHero { padding: 14px 16px; }
  .resultHero__amount strong { font-size: 30px; }

  /* 공제 탭 위 안내 링크(280px 고정)를 줄바꿈 */
  .guide { display: flex; flex-wrap: wrap; gap: 8px; }
  .guide a.guideBtn { width: auto !important; max-width: 100%; white-space: normal; }
  /* 체크리스트: 데스크톱은 글자를 원 위에 절대 위치로 겹치는데, 폭 auto 면 원(25px) 폭이 되어 글자가 한 자씩 세로로 흘러넘쳤다 → 원 옆에 나란히 */
  .guide.form .guideBtn { display: inline-flex; align-items: center; gap: 8px; margin-right: 0; }
  .guide.form .guideBtn .circle { flex: none; }
  .guide.form .guideBtn .button-text { position: static; margin: 0; padding: 0; }
  .guide.form .guideBtn:hover .circle { width: 25px; }	/* 터치 뒤 남는 hover 로 원이 줄 전체로 늘지 않게 */
  .guide.form .guideBtn:hover .button-text { color: #1859A7; }
  /* 머리글 로고: 45px 그대로면 연도·사진과 한 줄에 못 들어가 "연말정산" 이 접혀 머리글 밑으로 삐져나왔다 */
  nav .logo { font-size: 32px; height: auto; line-height: 1.2; white-space: nowrap; }
  nav .logo .sub { font-size: 13px; }
  /* 기본정보 인적공제 가족 표: 열 14개를 390px 에 욱여넣어 머리글이 한 자씩 세로로 쌓였다 → 표는 내용 폭, 상자는 가로 스크롤 */
  #divFamile .tblt_type1 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #divFamile .tbl_type1 { width: max-content; min-width: 100%; }
  #divFamile .tbl_type1 th { white-space: nowrap; padding: 0 10px; }

  /* 제출서류·기본정보 */
  .cntYETA .tbl_type2 { width: 100%; }
  .cntYETA .tbl_type2 td:first-child { padding-left: 8px; }
  .cntYETA .tbl_type2 td .ellipsis { width: auto; max-width: 100%; }
  .cntYETA .tbl_type2 td .btn { min-width: 0; }
  .cntYETA .tbl_type2 tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid #D1D1D1; }
  .cntYETA .tbl_type2 td { height: auto; border-bottom: 0; }
  .cntYETA .tbl_type2 td[name=fileView] { flex: 1 1 100%; min-width: 0; }
  .cntYETA .tbl_type2 colgroup { display: none; }
  .cntYETA .flex_full { min-width: 0; }
  .cntYETA .doc_view { min-height: 0; }
  .btnGroup { flex-wrap: wrap; }
  .basicInfo { flex-direction: column; }
  .basicInfo .picWrap { width: auto; padding-right: 0; justify-content: flex-start; }
  .basicInfo .d_flex { flex-wrap: wrap; row-gap: 16px; }
  .basicInfo .radio_merge { flex-wrap: wrap; }
  .basicInfo .radio_merge label { white-space: nowrap; }

  /* 등록 레이어·확인창: 화면 안(인라인 고정 폭을 덮는다) */
  .popContainer .inner { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
  .rc_modal_section { width: calc(100vw - 32px) !important; max-width: 420px; }

  /* 다음 버튼: 아래 가운데 */
  .fixedNextBtn { right: 16px; bottom: 16px; height: 44px; font-size: 15px; }
}

/* 움직임 줄이기 설정: 반복·이동 키프레임은 멈추고, 대기 표시만 은은한 깜빡임으로 남긴다.
   jQuery 애니메이션(slideDown·숫자 카운트업·스크롤)은 hrCommon.js 에서 $.fx.off 로 멈춘다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* 모달은 크기 변화 없이 페이드만 */
  .popContainer .inner, .rc_modal_section { scale: none !important; }
  .hrLoaderSpin, .spinner div, .loading-text {
    animation: yeta-reduced-pulse 1.2s var(--ease-in-out) infinite alternate !important;
  }
}
@keyframes yeta-reduced-pulse {
  from { opacity: 1; }
  to { opacity: 0.35; }
}