@charset "utf-8";
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Bootstrap reset *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}
.row {display: block; margin-right: 0; margin-left: 0;}
a.link, a.link:hover, a.link:visited, a.link:link {font-size: 16px; line-height: 1.625em; color: #0600ff !important; text-decoration: underline; text-underline-offset: 5px;}
a.anchor {position: relative; top: -160px;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * popup *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.pop_bg{ display: none; position:fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 1000; cursor: pointer;}
.pop_wrap{ display: none; position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; z-index: 1001;  box-sizing: border-box; width: 90%; max-width: 1400px; max-height: 100vh; overflow-y: auto;}

.pop_bg.on,
.pop_wrap.on {display: block;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * section *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.section {box-sizing: border-box;}
.section.pb-0 {padding-bottom: 0;}
.section.pt-0 {padding-top: 0;}
.section.last {padding-bottom: 150px;}
.section.bgc {background-color: #f5f2ee;}

.section [class^=row] + [class^=row] {margin-top: 50px;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Title *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.row_tit {position: relative; padding-bottom: 14px; box-sizing: border-box;}
.row_tit h5 {font-weight: 500; font-size: 26px; line-height: 1em; color: #222;}
.row_tit::before {content: ''; position: absolute; width: 100%; height: 1px; background-color: #464543; bottom: 0; left: 0;}

.heading .txt_box {font-size: 20px; line-height: 1.7em; color: #222;}
.heading .txt_box b {font-weight: 700;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * txt_box *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.con_box.type01 {color: #222; font-size: 16px; line-height: 2em; padding: 10px 20px; box-sizing: border-box;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * table *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.table_wrap {overflow-x: auto;}
table {width: 100%;}
/* type02 */
table.type02 {text-align: center;}
table.type02 * {vertical-align: middle;}
table.type02 th {height: 60px; background-color: #fce5cd;}
table.type02 th.yellow {background-color: #fff2cc;}
table.type02 th span {font-weight: 200;}
table.type02 td {height: 90px;}
table.type02 th,
table.type02 td {border: 1px solid #000; padding: 15px; box-sizing: border-box;}

/* type03 */
table.type03 {table-layout: fixed;}
table.type03 th,
table.type03 td {border: 1px solid #000; height: 60px;}
table.type03 th {background-color: #c94a30; text-align: center;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * timeline *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.timeline ul{ display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 900px; margin: 0 auto 45px;}
.timeline ul li{ position: relative;}
.timeline ul li + li::before{ content: ""; display: block; width: 410px; height: 1px; background: #bfbfbf; position: absolute; top: 50%; right: 100%; transform: translateY(-50%);}
.timeline ul li i{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px; border:  10px solid #ababab; background: #fff; box-sizing: border-box; z-index: 1; position: relative;}
.timeline ul li p{width: fit-content; text-align: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(calc(-100% - 10px)); font-family: "Poppins"; font-size: 20px; font-weight: 500; line-height: 1.2em; color: #222; white-space: nowrap;}

/* on */
.timeline ul li.on::before{ background: #ca4e34; }
.timeline ul li.on i{ border-color:#ca4e34 ; }
.timeline ul li.on p{ color:#ca4e34; }

/* 너비 */
.timeline.item04 ul li + li::before {width: 270px;}
.timeline.item05 ul li + li::before {width: 185px;}

@media all and (max-width: 1024px) {
    .timeline ul li p {font-size: 16px; white-space: initial;}
}

@media all and (max-width: 900px) {
    .timeline ul {max-width: 768px;}
    .timeline ul li + li::before {width: 344px;}
    .timeline.item04 ul li + li::before {width: 216px;}
    .timeline.item05 ul li + li::before {width: 152px;}
}

@media all and (max-width: 768px) {
    .timeline ul {max-width: 640px;}
    .timeline ul li + li::before {width: 280px;}
    .timeline.item04 ul li + li::before {width: 174px;}
    .timeline.item05 ul li + li::before {width: 120px;}
}

@media all and (max-width: 640px) {
    .timeline ul {max-width: 460px; padding: 0 20px; box-sizing: border-box;}
    .timeline ul li + li::before {width: 170px;}
    .timeline.item04 ul li + li::before {width: 114px;}
    .timeline.item05 ul li + li::before {width: 75px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * step_list *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

.step_list {display: flex; justify-content: space-between; overflow: hidden;}
.step_list li {width: 14.285%; max-width: 80px; text-align: center; position: relative;}
.step_list li b {font-weight: 700; font-size: 16px; line-height: 1em; color: #c94a30;}
.step_list li p {font-weight: 600; font-size: 16px; line-height: 1.5em;}
.step_list .img_box {display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1/1; border-radius: 50%; background-color: #fff; border: 3px solid #f5950e; margin: 15px 0 10px;}
.step_list .img_box img {width: 56.25%;}
/* line */
.step_list li:first-child .img_box {position: relative;}
.step_list li:first-child .img_box::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; height: 4px; width: 1920px; background-color: #f5950e; z-index: -1;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * img_list *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.img_list{margin-top:30px; }
.img_list ul:before{position: absolute; content: ''; width: 90%; top:65px; left:50%; background:#f5950e; height: 3px; transform: translateX(-50%); z-index: -1;}
.img_list ul{width: 100%; display: flex; justify-content: space-between;position: relative; z-index: 3;}
.img_list ul > li .img_box{ box-sizing: border-box; width: 130px; height: 130px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin:0 auto;}
.img_list ul > li .img_box > div{width: 80px; height: 80px; border: 3px solid #f5950e; box-sizing: border-box; border-radius: 50%; background-color: #ffffff; display: flex; align-items: center; justify-content: center;}
.img_list ul > li .img_box > div img {height: 30px;}
.img_list ul > li .img_box{background-color: transparent;}
.img_list ul > li .txt_box{margin-top:35px; text-align: center;}
.img_list ul > li .txt_box .num_tit{font-size: 18px; line-height: 48px; color:#222222; font-weight: 500; display: block;}
.img_list ul > li .txt_box > div{margin-top: 15px;}
.img_list ul > li .txt_box > div > p > b{display: block; font-weight: 500; margin-bottom: 10px;}
.img_list ul > li .txt_box > div > p {font-size: 18px; color:#222222; font-weight: 300;}

/* big */
.img_list ul > li.y_big .img_box{background: #f5950e; }
.img_list ul > li.y_big .img_box > div{border: 0; background-color:transparent;}
.img_list ul > li.big .img_box{border: 10px solid #f5950e;background: #fff; }
.img_list ul > li.big .img_box > div{border: 0; background-color:transparent;}
.img_list ul > li.big .img_box > div img,
.img_list ul > li.y_big .img_box > div img {height: 50px;}

@media all and (max-width: 1100px) {
    .img_list br {display: none;}
    .img_list ul {flex-wrap: wrap; row-gap: 30px;}
    .img_list ul:before {width: 2px; height: calc(100% - 50px); top: 0; left: 49px; transform: unset;}
    .img_list ul > li {width: 100%; display: flex; align-items: center; gap: 40px;}
    .img_list ul > li .img_box {margin: 0;}
    .img_list ul > li .txt_box {margin: 0; flex: 1; text-align: left;}
    .img_list ul > li .txt_box .num_tit {line-height: 1em;}
    .img_list ul > li .txt_box > div > p > b {margin-bottom: 0;}
    .img_list ul > li .img_box {width: 100px; height: 100px;}

    /* full yellow big */
    .img_list ul > li.big .img_box > div img,
    .img_list ul > li.y_big .img_box > div img {height: 40px;}
    .img_list ul > li .img_box > div img {height: 25px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * list *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.dot_list {list-style: disc; margin-left: 20px;}
.bar_list {list-style: '-'; margin-left: 0.5em;}
.bar_list li {padding-left: 0.25em; box-sizing: border-box;}

.item_list {display: flex; flex-wrap: wrap;}
.item_list li {border: 1px solid #000;}
.item_list li + li {border-left: none;}
.item_list li .img_box {display: flex; width: 100%; align-items: center; justify-content: center; height: 195px; padding: 10px; box-sizing: border-box; border-bottom: 1px solid #000;}
.item_list li .img_box img {width: 100%; max-width: fit-content;}
.item_list li .txt_box {display: flex; align-items: center; justify-content: center; height: calc(100% - 195px); min-height: 80px; text-align: center; font-weight: 300; font-size: 18px; line-height: 1.44em; box-sizing: border-box; padding: 10px; box-sizing: border-box;}

/* row02 */
.logo_list {display: flex; flex-wrap: wrap; margin-top: 15px;}
.logo_list li {display: flex; align-items: center; justify-content: center; max-width: 270px; min-height: 60px; border: 1px solid #000;}
.logo_list li .center > * {vertical-align: middle;}
.logo_list li + li {border-left: none;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * top line *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.top_line {margin-bottom: 40px;}
.top_line ul{width: 100%; display: flex; justify-content: space-between; position: relative; z-index: 3;}
/* img */
.top_line ul li {text-align: center;}
.top_line ul li .img_box{ box-sizing: border-box; width: 130px; height: 130px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; background-color: #fff; border: 3px solid #222; position: relative;}
.top_line ul li.on .img_box,
.top_line ul li.over .img_box{border: 3px solid #f5950e;}
.top_line ul li.over .img_box{transform: scale(1);}
.top_line ul li.second .img_box:before{position: absolute; top:-5px; right:-5px; width: 40px; height: 40px; border-radius: 50%; background: #222; color:#fff; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 500; content: attr(data-num);}
.top_line ul li.on.second .img_box:before,
.top_line ul li.over.second .img_box:before{background-color: #f5950e;}
.top_line ul li .img_box img {width: 50%; height: 50%; object-fit: contain;}

/* txt */
.top_line ul li .txt_box{margin-top:35px;}
.top_line ul li .txt_box.type01{margin-top: 23px;}
.top_line ul li .txt_box .bot_tit{font-size: 18px; color:#222222; text-align: center; font-weight: 500; display: block;}
.top_line ul li.on .txt_box .bot_tit,
.top_line ul li.over .txt_box .bot_tit{color:#f5950e;}
.top_line ul li .txt_box > div{margin-top: 15px;}
.top_line ul li .txt_box > div > p > b{display: block; text-align: center; font-weight: 500; margin-bottom: 10px;}
.top_line ul li .txt_box > div > p {text-align: center; font-size: 18px; color:#222222; font-weight: 300;}

/* 예외 사항 */
.wishlist .top_line ul {justify-content: flex-start; column-gap: 30px;}

.mypage2_con.dejpoints .top_line ul{width: 100%;}
.mypage2_con.dejpoints .top_line ul:before{content: none;}

.mypage2_con.mypage .top_line ul > li{width: 16.666%; }
.mypage2_con.mypage .top_line ul li .img_box{border-color: #222; transform: scale(.6); transition: .3s;}
.mypage2_con.mypage .top_line.type02 ul > li{width: 16.666%; position: relative;}
.mypage2_con.mypage .top_line.type02 ul > li::after{content: ""; display: block; width: 100%; height: 3px; position: absolute; top: 50%; z-index: -1; background: #222;}
.mypage2_con.mypage .top_line.type02 ul > li.on::after{background: #f5950e;}
.mypage2_con.mypage .top_line.type02 ul > li:first-child:after{width: 50%; right: 0;}
.mypage2_con.mypage .top_line.type02 ul > li:last-child:after{width: 50%; left: 0;}
.mypage2_con.mypage .top_line ul:before{background:#f5950e ; width: 90%; left: 50%; transform: translateX(-50%);}


@media all and (max-width:1000px){
    .top_line ul{flex-wrap: wrap; justify-content: flex-start; gap: 10px 0;}
    .top_line ul > li{width: 20%; position: relative;}
    .top_line ul:before{left: 40px;}
}

@media all and (max-width:800px){
    .top_line ul:before{top: 45px;}
    .top_line ul li .img_box{width: 85px; height: 85px;}
    .top_line ul li .txt_box,
    .top_line ul li .txt_box.type01{margin-top: 15px;}
    .top_line ul li .txt_box .bot_tit{font-size: 16px;}
    .top_line ul li.second .img_box:before{width: 30px;height: 30px;}
    .mypage2_con.mypage .top_line ul li .img_box{transform: scale(.75); flex-shrink: 0;}
    .mypage2_con.mypage .top_line ul:before{left:20px; width: 90%;}
}

@media all and (max-width: 640px) {
    .top_line ul {}
    .top_line ul li {}
    .top_line ul li a {}
    .top_line ul li .img_box {}
    .top_line ul li .txt_box {margin-top: 0 !important; flex: 1;}
    .top_line ul li .txt_box br {display: none;}
    .top_line ul li .txt_box .bot_tit {display: none; font-size: 20px;}
    .top_line ul li.on .txt_box .bot_tit{display: block; text-align: center; width: 100vw; background-color: #f5950d; color: #fff; padding: 10px 0;}
    .top_line ul li.on .txt_box .bot_tit{ margin: 15px calc(50% - 12.5vw) 0;}
    .top_line ul li + li.on .txt_box .bot_tit{ margin: 15px calc(50% - 31.5vw) 0; font-size: 20px;}
    .top_line ul li + li + li.on .txt_box .bot_tit{ margin: 15px calc(50% - 50vw) 0;}
    .top_line ul li + li + li + li.on .txt_box .bot_tit{ margin: 15px calc(50% - 69vw) 0;}
    .top_line ul li + li + li + li + li.on .txt_box .bot_tit{ margin: 15px calc(50% - 87.5vw) 0;}
    .top_line ul li.on .txt_box .bot_tit::after {position: absolute; content: ""; top: 110px; left: 35px; margin-top: -29px; border: 10px solid transparent; border-bottom: 10px solid #f5950d; width: 0; height: 0;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * payment *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.payment .btn_wrap {margin-top: 0; gap: 10px;}
.payment .btn_wrap .btn + .btn {margin: 0;}
.payment .tit_box.type01 .tit {height: unset; min-height: 80px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box;}
.payment .tit_box.type01 .btn_tit .btn.b_btn {color:#fff !important; width: 150px; height: 46px; display: flex;justify-content: center; align-items: center; border-radius: 23px; font-weight: 400;}
.payment .pop_wrap {max-width: 1080px;}
.payment .tit_box.type01 .tit p {display: inline-block; vertical-align: middle; width: calc(100% - 50px); box-sizing: border-box;}
.payment .tit_box.type01 .tit i {position: absolute; right: 30px; display: block; width: 18px; height: 18px;}
.payment .tit_box.type01 .tit i:before {position: absolute; content: ''; width: 15px; height: 15px; border: 0; border-bottom: solid 1px #fff; border-right: solid 1px #fff; top: 0; left: 0; transform: rotate(45deg);}
.payment .tit_box.type01 .tit.on i:before {position: absolute; content: ''; width: 15px; height: 15px; border-top: solid 1px #fff; border-bottom: none; border-right: solid 1px #fff; top: 5px; left: 0; transform: rotate(-45deg);}

@media all and (max-width: 767px) {
    .payment .btn_wrap {flex-direction: column;}
}

.payment_con02 [class ^= row] + [class ^= row] {margin-top: 30px;}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * icon *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.icon.info {display: block; width: 25px; height: 25px; background: url(/img/front/info_icon.png) no-repeat center center; background-size: 25px 25px; cursor: pointer;}


/**
 * Close Account
 */

.close_account_con .desc_box { min-height: 180px; border: 2px solid #f5971e; border-radius: 30px; box-sizing: border-box; padding:30px; }
.close_account_con .con_wrap { letter-spacing: initial; }
.close_account_con .con_wrap .tit_box p { color: #222; }
.close_account_con .con_wrap .txt_box { color: #222 !important; }
.close_account_con .con_wrap .txt_box .radio_box label { display: flex; align-items: center; gap: 10px; }
.close_account_con .con_wrap .txt_box .desc { list-style: disc; margin-left: 90px; }
.close_account_con .con_wrap .txt_box .agree { margin-left: 20px; }
.close_account_con .con_wrap .txt_box .agree input[type="checkbox"] { zoom:2; accent-color: #f5971e; }

/**
 * jw
 */
.breadcrumb { border-radius: 20px; background: #efefef; padding-left:25px; padding-right: 25px; overflow-x: auto; }
.breadcrumb,
.breadcrumb a { font-size: 13px; letter-spacing: 0; line-height: 1.5; }
.breadcrumb .active a{ color: #343a40; }

.card { font-size: 18px; letter-spacing: initial; border-radius: 20px; text-align: center; }
.dropdown-item { letter-spacing: initial; }
.dropdown-item.active { background-color: #f5950e; color: #fff; }
.dropdown-item:hover { letter-spacing: initial; font-size: inherit; color: #fff; }
a.dropdown-item:not([href]):hover {color: #fff;}

.btn_close_account { background: #000; font-size:20px; color:#fff !important; height: 46px; display:flex; justify-content: center; align-items: center; border-radius: 23px; font-weight: 400; }

.admin-header-links { background-color: #333; text-align: center; color: #eee; }
.admin-header-links * { display: inline-block; margin: 0 10px; line-height: 25px; font-size: 12px; }
.admin-header-links .impersonate { display: inline-block; text-align: center; padding: 10px 0; }
.admin-header-links .impersonate a { background-color: #555; padding: 0 15px; color: #fff; }
.admin-header-links .impersonate a:hover,
.admin-header-links .impersonate a:focus { background-color: #666; }


@media (max-width: 480px) {
    .password-wrap {
        & .pw-toggle {
            width: 48px;
            height: 48px;
            right: 6px;
        }

        & .password-field--toggle .form-control {
            padding-right: 60px;
        }
    }
}
.password-wrap {
    & .password-field--stack { position: relative; display: block; }
    & .password-field--toggle input[type=password] { padding-right: 52px; /* 아이콘 + 터치영역 공간 */ }
    & .pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent; padding: 0; cursor: pointer; color: #8c959f; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; }
    & .pw-toggle:hover { color: #57606a; }
    & .pw-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(9,105,218,.15); }

    & .pw-icon {
        width: 20px;
        height: 20px;
        display: block;
        fill: currentColor;
    }
    & .pw-icon-eye-off { display: none; }

    & .pw-toggle.is-visible .pw-icon-eye { display: none; }
    & .pw-toggle.is-visible .pw-icon-eye-off { display: block; }

    /* ===== Caps Lock warning ===== */
    & .pw-capslock {
        display: none;
        margin-top: 6px;
        font-size: 12px;
        color: #9a6700;
    }

    & .pw-capslock.is-on {
        display: block;
    }

    /* ===== Popover (below, floating, no layout shift) ===== */
    & .password-popover {
        background: #fff;
        border: 1px solid #d0d7de;
        border-radius: 10px;
        padding: 12px 12px 10px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
        box-sizing: border-box;
    }

    & .password-popover--below {
        position: absolute;
        left: 0;
        top: calc(100% + 8px);
        width: min(360px, 100%);
        z-index: 9999;
        display: none;
    }

    & .password-popover.is-open { display: block; }

    & .password-popover--below::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 18px;
        width: 12px;
        height: 12px;
        background: #fff;
        border-left: 1px solid #d0d7de;
        border-top: 1px solid #d0d7de;
        transform: rotate(45deg);
    }

    /* popover content (기존 그대로) */
    & .pw-title { font-weight: 600; margin-bottom: 10px; }
    & .pw-meter { height: 10px; border-radius: 999px; background: #eef1f4; overflow: hidden; margin-bottom: 8px; }
    & .pw-meter__bar { height: 100%; width: 0%; background: #d0d7de; transition: width .15s ease; }
    & .pw-score { font-size: 12px; color: #57606a; margin-bottom: 10px; }
    & .pw-rules { margin: 0; padding: 0; list-style: none; }
    & .pw-rules li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: #57606a; }
    & .pw-check { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #d0d7de; display: inline-block; position: relative; flex: 0 0 16px; }
    & .pw-rules li.is-ok { color: #1a7f37; }
    & .pw-rules li.is-ok .pw-check { border-color: #1a7f37; background: #1a7f37; }
    & .pw-rules li.is-ok .pw-check::after {
        content: "";
        position: absolute;
        left: 4px; top: 2px;
        width: 6px; height: 9px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    & .pw-hint { margin-top: 8px; font-size: 12px; color: #6e7781; }

    /* strength level colors (0~5) */
    & .password-popover[data-level="0"] .pw-meter__bar { background: #d0d7de; }
    & .password-popover[data-level="1"] .pw-meter__bar { background: #cf222e; }
    & .password-popover[data-level="2"] .pw-meter__bar { background: #fb8f44; }
    & .password-popover[data-level="3"] .pw-meter__bar { background: #d4a72c; }
    & .password-popover[data-level="4"] .pw-meter__bar { background: #2da44e; }
    & .password-popover[data-level="5"] .pw-meter__bar { background: #1a7f37; }
}