label {
    overflow-x: auto;
}

.id-pw-find-page{
    grid-template-rows: 60px 40px 1fr;
}
.id-pw-find-page .id-pw-find-page__lnb ul{
    height: 40px;
    position: relative;
    
}
.id-pw-find-page .id-pw-find-page__lnb ul li a{
    width: 100%;
    height: 100%;
    padding-bottom: 8px;
    color:#828286;
    font-weight: 400;
    border-bottom: 1px solid #ccc;
    transition: 0.2s ease-out;
    font-size: 17px;
}
.id-pw-find-page .id-pw-find-page__lnb ul::before{
    content:'';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 40px;
}
.id-pw-find-page .id-pw-find-page__lnb ul.tabId::before{
    position: absolute;
    left: 0;
    top: -1px;
    width: 50%;
    height: 40px;
    transition: 0.2s ease-out;
}
.id-pw-find-page .id-pw-find-page__lnb ul.tabPwd::before{
    position: absolute;
    left: 50%;
    top: -1px;
    width: 50%;
    height: 40px;
    transition: 0.2s ease-out;
    opacity: 0.8;
}
  .id-pw-find-page .id-pw-find-page__lnb ul li a.on{
    position: relative;
    padding: 10px;
    font-weight: 600;
    color: #121212;
    transition: 0.2s ease-out;
      border-bottom: 3px solid #3B82F6;
} 

.id-pw-find-page .content{
    height: calc(100svh - 100px);
}

.id-pw-find-page .content .find--id{
    width: 100%;
    padding: 30px 20px;
}
.id-pw-find-page .content .button--kg{
    height: 50px;
    background-color: #ffd43b;
    width: 100%;
    border-radius:12px;
    font-weight: 600;
    border:none;

}

.id-pw-find-page .content .button--kg2{
    height: 50px;
    width: 100%;
    border-radius:12px;
    font-weight: 600;
    border: 1px solid #b5b5b5;
    background-color: #fcfcfc;
    font-weight: 600;
    color: #828286;

}
/* .id-pw-find-page .content .button--kg a{
    
    letter-spacing: -0.35px;
    width: 100%;
    height: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
} */
.id-pw-find-page .content .section{
    width: 100%;
    margin-bottom: 165px;
    gap: 10px;
    padding: 20px;
}
.id-pw-find-page .content .find--id__result{
    gap: 15px;
    width: 100%;
}
.id-pw-find-page .content .find--id__result .discription{
    gap: 8px;
}
.id-pw-find-page .content .find--id__result .id_result_txt_box p{
    margin-bottom: 12px;
}

/* 비번찾기 */
.id-pw-find-page .content .find--pw{
    padding: 30px 20px;
    
}
.id-pw-find-page .content .find--pw__first{
    width: 100%;
    gap: 10px;
}
.id-pw-find-page .content .find--pw .find--pw__result{
    gap: 10px;
}

/* 공통 */

.id-pw-find-page .content .id-pw-find-page__input-wrapper{
    width: 100%;
    height: 50px;
    border:1.5px solid #d9d9d9;
    border-radius: 12px;
    padding: 16px;
    gap: 10px;
}
.id-pw-find-page .content .id-pw-find-page__input-wrapper:focus-within{
    border:2px solid #FFD43B;
}
.id-pw-find-page .content .id-pw-find-page__input-wrapper .id-pw-find-page__icon{
    width: 16px;
    height: 16px;
    opacity: 0.3;
}


.id-pw-find-page .content .id-pw-find-page__input-wrapper:focus-within .id-pw-find-page__icon,
.id-pw-find-page .content .id-pw-find-page__input-wrapper.active .id-pw-find-page__icon,
.id-pw-find-page .content .id-pw-find-page__input-wrapper .id-pw-find-page__icon.active
{
    opacity: 1;
}
.id-pw-find-page .content .id-pw-find-page__input-wrapper .id-pw-find-page__input{
    width: 100%;
    outline: none;
    border:none;
    background: transparent;
}
.id-pw-find-page .content .id-pw-find-page__input-wrapper .id-pw-find-page__input::placeholder{
    color:#a1a1a1;
}

/* 아이디찾기 */

#find--id .find_id_txtbox {
    width:100%;
    position: relative;
    transition: opacity 0.3s ease;
}

#find--id .find_id_txtbox .find_id_h2 {
    font-size: 17px;
    font-weight: 500;
}

#find--id .find_id_txtbox .find_id_p1 {
    font-size: 14px;
    font-weight: 400;
    color:  #828286;
}

#find--id .find_id_txtbox #toggle_btn {
    position:absolute;
    top: 10px;
    right: 10px;
    float: right;
}

#find--id .find_id_txtbox,
#find--id .find_id_txtbox2 {
    position: relative;
    transition: opacity .3s ease;
}

#find--id .find_id_inbox,
#find--id .find_id_inbox2 {
    display: none;
    width: 100%;
    max-width:100%;
    flex-direction: column;
    gap: 15px;
    padding-top: 15px;
    overflow-x: hidden;
}

#find--id .find_id_txtbox #toggle_btn i,
#find--id .find_id_txtbox2 #toggle_btn i {
    transition: transform 0.3s ease;
}

#find--id .find_id_txtbox.active #toggle_btn i,
#find--id .find_id_txtbox2.active #toggle_btn i {
    transform: rotate(180deg);
}

/* 희미해지는 효과 */
#find--id .dimmed {
    opacity: 0.4;
}

#find--id .find_id_inbox label {
    height: 56px;
    border: 1px solid #ccc;
    border-radius: 5px;
    gap: 10px;
}

#find--id .find_id_inbox input {
    outline: none;
    border: none;
    background: transparent;
    height: 56px;
}

#find--id .find_id_inbox .user_name_label {
    display: flex;
    width: 100%;
    height: 44px;
    align-items: center;
}

#find--id .find_id_inbox .user_name_label .user_name_input {
    width: 100%;
    outline: none;
    border: none;
    background: transparent;
}

#find--id .find_id_inbox .user_fnum_label {
    display: block;
    width: 32%;
    position: relative;
    padding: 10px;
    height: 44px;
    border: 1px solid #ccc;
    border-radius: 5px;
    gap: 10px;
}

/*#find--id .find_id_inbox #find_id_fnum {*/
/*    width: 100%;*/
/*    position: relative;*/
/*    outline: none;*/
/*    border: none;*/
/*    background: transparent;*/
/*    appearance: none;*/
/*    background: url(/img/mercury/angle_down-icon.svg) no-repeat calc(100% - 0px) 50% / 14px auto;*/
/*}*/

#find--id .find_id_inbox .user_lnum_label {
    flex: 1; /* ✅ 78% 대신 유연하게 변경 */
    display: flex;
    align-items: center;
    min-width: 0; /* ✅ 텍스트가 넘치지 않게 */

}

#find--id .find_id_inbox .id_find_cbtn {
    width: 100%;
    height: 50px;
    background-color: #ffd43b;
    border-radius: 5px;
    font-weight: 600;
    border: none;
}

.find--pw .find--pw__first .find_pwd_inbox {
    display: flex;
    gap: 15px;
    width: 100%;
}

.find--pw .find--pw__first .find_pwd_inbox .pwd_find_cbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14px;
    width: 100%;
    height: 50px;
    background-color: #ffd43b;
    border-radius: 5px;
    font-weight: 500;
    border: none;
    gap: 0;
    padding: 5px;
}

.find--pw .find--pw__first .find_pwd_inbox .pwd_find_cbtn span {
    width: 100%;
    font-weight: 400;
    text-align: center;
}


#find--id .find_id_inbox .find_id_numbox {
    display: flex;
    width: 100%;
    gap: 10px;
    margin: 15px 0;
}

#find--id .atag_center {
    width: 100%;
    height: 50px;
    background-color: #ffd43b;
    border-radius: 5px;
    font-weight: 600;
    border: none;
}

#find--pwd .atag_center {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

/*아이디찾기결과*/

#idResult {
    padding:40px 20px 20px;
}

#idResult .atag_center {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

#idResult .id_result_btn_box {
    display: flex;
    width: 100%;
    gap: 10px;
}

#idResult .id_result_box {
    display: block;
    width: 100%;
}

#idResult .id_result_txt_box .find_id_result{
    display: block;
    font-size: 22px;
    text-align: center;
}

#idResult .id_result_box .id_result {
    display: block;
    width: 100%;
}

#idResult .id_result_box .id_result ul li {
    width: 100%;
    margin: 0 auto 20px;
    gap:10px;
}

#idResult .id_result_box .id_result ul li a.id_find_mc {
    border-radius: 8px;
    background: #000;
    color: #fff;
}

#idResult .id_result_box .id_result ul li a.id_find_mc.jb {
    background: #000;
    color: #fff;
}

#idResult .id_result_box .id_result ul li a.id_find_na {
    background: #1EC800;
    color: #fff;
}

#idResult .id_result_box .id_result ul li a.id_find_ka {
    background: #F5E901;
}

#idResult .id_result_box .id_result ul li a {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    font-weight: bold;
}

#idResult .id_result_box .id_result ul li a .find_ico{
    display: inline-block;
    width: 40px;
    line-height: 40px;
}

#idResult .id_result_box .id_result ul li a span img{
    width: 30px;
    vertical-align: -13px;
}

/* 비밀번호 재설정 */
#reset_pw .reset_pw_txtbox {
    margin-bottom: 20px;
    text-align: center;
}

#reset_pw .reset_pw_txtbox figure img {
    max-width: 120px;
}

#reset_pw .reset_pw_txtbox2 {
    margin-bottom: 20px;
}

#reset_pw .reset_pw_txtbox span {
    font-size: 25px;
    font-weight: bold;
}

#reset_pw .reset_pw_txtbox .reset_pw_p1 {
    font-size: 16px;
    margin-bottom: 6px;
}

#reset_pw .reset_pw_inbox {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

#reset_pw .reset_pw_inbox .reset_pw_p1 {
    font-size: 16px;
    margin-bottom: 15px;
}

#reset_pw .reset_pw_inbox .reset_pw_p2 {
    font-size: 14px;
    margin-bottom: 15px;
    color: #979797;
}

#reset_pw .reset_pw_inbox .reset_pw_p1 .reset_pw_p2{
    height: 50px;
    margin-bottom: 15px;
    border: 1.5px solid #d9d9d9;
    border-radius: 12px;
    padding: 14px;
    gap: 10px;
}

#reset_pw .reset_pw_inbox input {
    outline: none;
    border: none;
    background: transparent;

}

#reset_pw .reset_pw_inbox label i img {
    width: 18px;
    height: 14px;
}

#reset_pw .reset_pw_inbox .pw_reset_label {
    display: flex;
    width: 100%;
}

#reset_pw .reset_pw_inbox .pw_reset_label .pw_reset_input {
    width: 100%;
    outline: none;
    border: none;
    background: transparent;
}

#reset_pw .reset_pw_inbox .pw_reset_cbtn {
    width: 100%;
    height: 50px;
    margin-bottom: 30px;
    background-color: #ffd43b;
    border-radius: 12px;
    font-weight: 600;
    border: none;
}


#selfInput {
    position: absolute;
    width:calc(100% - 40px);
    z-index: 10;
    top: 13px;
    left: 12px;
    border:none;
}
#self_input{
    margin-bottom:-10px;
}

#errorModal p {
    text-align: center;
}

#errorModal > div {
    margin-top: 15px;
}

#errorModal a.button--jQuery-modal {
    background: #FFD43B;
    width: 20%;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    font-weight: 600;
}

#check--id p {
    text-align: center;
}

#check--id > div {
    margin-top: 15px;
}

#check--id a.button--jQuery-modal {
    background: #FFD43B;
    width: 20%;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    font-weight: 600;
}

.info_box {
    width: 100%;
    margin-top: 30px;
    padding: 15px;
    background: #F7F7F8;
    border-radius: 15px;
}

.info_box p {
    margin-bottom: 10px;
    text-align: left;
    font-weight: 400;
    color: #828286;
}

.info_box p:last-child {
    margin-bottom: 0;
}

.info_box p.title {
    margin-bottom: 6px;
    font-weight: 500;
    color: #121212;
}

.info_box p a {
    color: #3B82F6;
    font-weight: 500;
    border: none;
    background: none;
}

#check--pw p {
    text-align: center;
}

#check--pw > div {
    margin-top: 15px;
}

#check--pw a.button--jQuery-modal {
    background: #FFD43B;
    width: 20%;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    font-weight: 600;
}

div.line {
    position: relative;
    width: 150%;
    height: 5px;
    margin: 30px 0;
    background: #f7f7f8;
}

/* 셀렉트박스 */

.select_box {
    position: relative;
    width: 110px;
    height: 56px;
}

.select_box .selected {
    height: 44px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select_box .arrow i {
    font-size: 12px;
    transition: transform 0.3s;
}

.select_box.open .arrow i {
    transform: rotate(180deg);
}

.num_list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 4px 0 0;
    padding: 4px 0;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 10;
    background: #fff;
}

.num_list li {
    padding: 10px;
}

.num_list li:hover {
    background: #F7F7F8;
}