@charset "utf-8";

/* ===== 마이페이지 비밀번호 변경 — Figma 1119:3229 (teal) =====
   Figma 375px 기준 × 1.92 = CSS px (720 뷰포트) */

/* ===================== 입력 / 오류 (1119:2769 · 1119:2945) ===================== */
.mpw-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}

/* 헤더 */
.mpw-head {position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; padding:21px 27px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mpw-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:69px; height:69px; background:none; border:0;}
.mpw-back img {width:38px; height:38px;}
.mpw-head h1 {flex:1; text-align:center; font-size:33px; font-weight:800; color:var(--ink);}
.mpw-vtoggle {flex:0 0 auto; padding:9px 22px; border:1.92px solid var(--line); border-radius:38px; background:var(--snow); color:var(--sub); font-size:21px; font-weight:600;}

/* 상단 안내 배너 */
.mpw-banner {position:relative; display:flex; align-items:center; gap:27px; padding:38px; overflow:hidden;
	background:linear-gradient(160deg, #1E3A5F 0%, #1A4A7A 60%, #0F766E 100%);}
.mpw-banner.is-error {background:linear-gradient(160deg, #7F1D1D 0%, #9A3838 55%, #1E3A5F 100%);}
.mpw-banner::before {content:''; position:absolute; right:-77px; top:-77px; width:307px; height:307px; border-radius:50%; background:rgba(255,255,255,.04);}
.mpw-banner::after {content:''; position:absolute; left:-38px; bottom:-38px; width:192px; height:192px; border-radius:50%; background:rgba(13,148,136,.12);}
.mpw-banner-ic {position:relative; z-index:1; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:104px; height:104px; border-radius:31px; background:rgba(255,255,255,.1); border:1.92px solid rgba(255,255,255,.18);}
.mpw-banner-ic img {width:54px; height:54px;}
.mpw-banner-tx {position:relative; z-index:1; display:flex; flex-direction:column; gap:8px;}
.mpw-banner-tx b {font-size:33px; font-weight:800; color:#fff;}
.mpw-banner-tx span {font-size:21px; color:rgba(255,255,255,.6); line-height:31.7px;}

/* 폼 */
.mpw-form {flex:1; display:flex; flex-direction:column; gap:35px; padding:38px; padding-bottom:300px;}
.mpw-field {display:flex; flex-direction:column; gap:11px;}
.mpw-label {display:flex; align-items:center; gap:11.5px; font-size:25px; font-weight:600; color:var(--body);}
.mpw-label img {width:25px; height:25px;}
.mpw-label i {color:var(--red); font-size:23px; font-weight:600; font-style:normal;}

.mpw-inwrap {position:relative; display:flex; align-items:center;}
.mpw-input {width:100%; padding:27px 92px 27px 29px; background:var(--card); border:1.92px solid var(--teal-2); border-radius:19px; font-size:27px; color:var(--ink); letter-spacing:1.3px;}
.mpw-input::placeholder {color:var(--sub); letter-spacing:0;}
.mpw-eye {position:absolute; right:25px; display:flex; align-items:center; justify-content:center; width:54px; height:54px; background:none; border:0;}
.mpw-eye img {width:35px; height:35px;}

/* 상태 메시지 */
.mpw-msg {display:flex; align-items:center; gap:9.6px; font-size:23px; line-height:34.5px;}
.mpw-msg img {flex:0 0 auto; width:25px; height:25px;}
.mpw-msg.ok {color:var(--teal-2);}
.mpw-msg.err {color:var(--red);}

/* 구분선 */
.mpw-divider {height:15px; margin:0 -38px; background:var(--snow); border-top:1.92px solid var(--line); border-bottom:1.92px solid var(--line);}

/* 강도 메터 */
.mpw-strength {display:flex; flex-direction:column; gap:11.5px; padding-top:6px;}
.mpw-strength-top {display:flex; align-items:center; justify-content:space-between;}
.mpw-strength-top .lbl {font-size:21px; font-weight:600; color:var(--sub);}
.mpw-strength-top .val {font-size:21px; font-weight:700;}
.mpw-strength-top .val.good {color:#16A34A;}
.mpw-strength-top .val.weak {color:var(--red);}
.mpw-bars {display:flex; gap:7.68px;}
.mpw-bars .bar {flex:1; height:8px; border-radius:4px; background:var(--line);}
.mpw-bars .bar.on.good {background:#16A34A;}
.mpw-bars .bar.on.weak {background:var(--red);}

/* 규칙 체크 박스 */
.mpw-rules {display:flex; flex-direction:column; gap:13.5px; margin-top:8px; padding:31px 29px 25px; background:var(--snow); border:1.92px solid var(--line); border-radius:19px;}
.mpw-rule {display:flex; align-items:center; gap:15px;}
.mpw-rule .ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:17px;}
.mpw-rule .ic img {width:19px; height:19px;}
.mpw-rule .tx {font-size:23px;}
.mpw-rule.on .ic {background:var(--teal-2);}
.mpw-rule.on .tx {color:var(--teal); font-weight:600;}
.mpw-rule.off .ic {background:var(--line);}
.mpw-rule.off .tx {color:var(--sub);}
.mpw-rule.fail .ic {background:#FEF2F2; border:1.92px solid #FECACA;}
.mpw-rule.fail .tx {color:var(--red);}
.churchro.dark-mode .mpw-rule.fail .ic {background:rgba(220,38,38,.16); border-color:rgba(220,38,38,.4);}

/* 오류: 5회 잠금 안내 */
.mpw-lock {display:flex; align-items:flex-start; gap:17px; padding:27px 29px; background:var(--cream); border:1.92px solid #FDE68A; border-radius:19px;}
.mpw-lock img {flex:0 0 auto; width:27px; height:27px; margin-top:3px;}
.mpw-lock p {font-size:23px; color:#92400E; line-height:36.9px;}
.mpw-lock b {font-weight:700;}
.churchro.dark-mode .mpw-lock {background:rgba(245,158,11,.1); border-color:rgba(253,230,138,.35);}
.churchro.dark-mode .mpw-lock p {color:#FCD9A0;}

/* 오류: 비밀번호 찾기 링크 */
.mpw-forgot {display:flex; align-items:center; justify-content:center; gap:9.6px; margin-top:-12px; padding:6px; background:none; border:0; color:var(--teal-2); font-size:25px; font-weight:700;}
.mpw-forgot img {width:27px; height:27px;}

/* 정상: 보안 권장 사항 */
.mpw-tip {display:flex; flex-direction:column; gap:15px; padding:27px 29px; background:#EEF2FF; border:1.92px solid #C7D2FE; border-radius:19px;}
.mpw-tip-h {display:flex; align-items:center; gap:11.5px;}
.mpw-tip-h img {width:27px; height:27px;}
.mpw-tip-h b {font-size:23px; font-weight:700; color:#1E3A5F;}
.mpw-tip ul {display:flex; flex-direction:column; gap:9.6px; padding-left:0; list-style:none;}
.mpw-tip li {position:relative; padding-left:21px; font-size:21px; color:#1E3A5F; line-height:31.7px;}
.mpw-tip li::before {content:'•'; position:absolute; left:0; font-weight:700;}
.churchro.dark-mode .mpw-tip {background:rgba(99,102,241,.12); border-color:rgba(199,210,254,.3);}
.churchro.dark-mode .mpw-tip-h b, .churchro.dark-mode .mpw-tip li {color:#C7D2FE;}

/* 제출 버튼 (하단 고정바) */
.mpw-submitbar {position:fixed; left:50%; bottom:128px; transform:translateX(-50%); z-index:35; width:720px; max-width:100%; padding:25px 27px 31px; background:var(--card); border-top:1.92px solid var(--line);}
.mpw-submit {display:flex; align-items:center; justify-content:center; gap:11.5px; width:100%; padding:27px; border:0; border-radius:19px; color:#fff; font-size:29px; font-weight:700;
	background:linear-gradient(137deg, #0F766E 0%, #0D9488 100%);}
.mpw-submit img {width:33px; height:33px;}
.mpw-submit.is-error {background:linear-gradient(137deg, #DC2626 0%, #EF4444 100%);}

/* 하단 탭바 */
.mpw-nav {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:40; width:720px; max-width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:var(--card); border-top:1.85px solid var(--line);}
.mpw-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.mpw-nav .tab img {width:42px; height:42px;}
.mpw-nav .tab.on {color:var(--teal);}
.mpw-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.mpw-nav .tab-fab .fab {position:absolute; left:50%; top:0; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg, #0D9488, #1E3A5F); border:5px solid var(--card); box-shadow:0 10px 24px rgba(13,148,136,0.4);}
.mpw-nav .tab-fab .fab img {width:48px; height:48px;}

/* 링크형 버튼 a:link 덮어쓰기 */
.mpw-wrap a.mpw-submit {color:#fff;}

/* ===================== 완료 (1119:3128) ===================== */
.mpwd-wrap {display:flex; flex-direction:column; min-height:100%; background:var(--snow);}
.mpwd-head {position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; padding:21px 27px; background:var(--card); border-bottom:1.92px solid var(--line);}
.mpwd-back {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:69px; height:69px; background:none; border:0;}
.mpwd-back img {width:38px; height:38px;}
.mpwd-head h1 {flex:1; text-align:center; font-size:33px; font-weight:800; color:var(--ink); margin-right:69px;}

.mpwd-body {flex:1; display:flex; flex-direction:column; align-items:center; padding:61px 46px 290px;}
.mpwd-icon {display:flex; align-items:center; justify-content:center; width:184px; height:184px; margin-bottom:38px; border-radius:50%; background:linear-gradient(135deg, #0F766E 0%, #0D9488 100%); box-shadow:0 15px 31px rgba(13,148,136,.35);}
.mpwd-icon img {width:92px; height:92px;}
.mpwd-title {font-size:42px; font-weight:800; color:var(--ink); text-align:center; margin-bottom:11.5px;}
.mpwd-sub {font-size:25px; color:var(--body); text-align:center; line-height:41px; margin-bottom:54px;}

/* 변경 완료 내역 카드 */
.mpwd-card {width:100%; padding:29px; background:var(--card); border:1.92px solid var(--line); border-radius:19px; margin-bottom:46px;}
.mpwd-card-h {display:flex; align-items:center; gap:9.6px; margin-bottom:9px;}
.mpwd-card-h img {width:25px; height:25px;}
.mpwd-card-h b {font-size:21px; font-weight:700; color:var(--teal);}
.mpwd-rec {display:flex; align-items:center; gap:19px; padding:15px 0;}
.mpwd-rec.bd {border-top:1.92px solid var(--line);}
.mpwd-rec-ic {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:13.5px;}
.mpwd-rec-ic img {width:25px; height:25px;}
.mpwd-rec-ic.mint {background:var(--mint);}
.mpwd-rec-ic.green {background:#F0FDF4;}
.mpwd-rec-ic.blue {background:#EFF6FF;}
.churchro.dark-mode .mpwd-rec-ic.green {background:rgba(34,197,94,.14);}
.churchro.dark-mode .mpwd-rec-ic.blue {background:rgba(59,130,246,.14);}
.mpwd-rec-tx {flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.mpwd-rec-tx b {font-size:23px; font-weight:600; color:var(--ink);}
.mpwd-rec-tx span {font-size:21px; color:var(--sub);}
.mpwd-rec-badge {flex:0 0 auto; font-size:21px; font-weight:700; color:var(--teal);}

/* 안내 박스 */
.mpwd-notice {display:flex; align-items:flex-start; gap:17px; width:100%; padding:25px 29px; background:var(--cream); border:1.92px solid #FDE68A; border-radius:19px; margin-bottom:46px;}
.mpwd-notice img {flex:0 0 auto; width:31px; height:31px; margin-top:2px;}
.mpwd-notice p {font-size:23px; color:#92400E; line-height:36.9px;}
.mpwd-notice b {font-weight:700;}
.churchro.dark-mode .mpwd-notice {background:rgba(245,158,11,.1); border-color:rgba(253,230,138,.35);}
.churchro.dark-mode .mpwd-notice p {color:#FCD9A0;}

/* 이동 버튼 */
.mpwd-btns {display:flex; flex-direction:column; gap:15px; width:100%;}
.mpwd-btn {display:flex; align-items:center; justify-content:center; gap:11.5px; padding:25px; border-radius:19px; font-size:27px; font-weight:700; text-align:center;}
.mpwd-btn img {width:31px; height:31px;}
.mpwd-btn.primary {background:linear-gradient(137deg, #0F766E 0%, #0D9488 100%); color:#fff;}
.mpwd-btn:not(.primary) {background:var(--card); border:1.92px solid var(--line); color:var(--body); font-size:25px; font-weight:600;}
.mpwd-wrap a.mpwd-btn.primary {color:#fff;}
.mpwd-wrap a.mpwd-btn:not(.primary) {color:var(--body);}

/* 하단 탭바 */
.mpwd-nav {position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:40; width:720px; max-width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:var(--card); border-top:1.85px solid var(--line);}
.mpwd-nav .tab {display:flex; flex-direction:column; align-items:center; gap:5.8px; color:var(--sub); font-size:19.2px;}
.mpwd-nav .tab img {width:42px; height:42px;}
.mpwd-nav .tab.on {color:var(--teal);}
.mpwd-nav .tab-fab {position:relative; align-self:stretch; width:96px;}
.mpwd-nav .tab-fab .fab {position:absolute; left:50%; top:0; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg, #0D9488, #1E3A5F); border:5px solid var(--card); box-shadow:0 10px 24px rgba(13,148,136,0.4);}
.mpwd-nav .tab-fab .fab img {width:48px; height:48px;}