/* 회사 계정 2단계 인증. style.css·pages.css 위에 필요한 것만 더한다. */

/* 보안 화면의 항목 줄. 문의·신청 목록과 같은 굵기를 쓴다. */
.mfa-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--line)}
.mfa-row-text{min-width:0;flex:1 1 20rem}
.mfa-row-name{font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mfa-row-desc{color:var(--muted);font-size:14px;margin-top:4px;max-width:34rem}
.mfa-row-action{flex:none;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:9px 18px;border-radius:6px;font-size:15px}
.security-action-tooltip{display:inline-flex;flex:none}.security-action-tooltip:focus{outline:2px solid var(--theme-link, #175b7c);outline-offset:3px;border-radius:6px}
#password-verification-gate>label[for=password-email]{margin-top:18px}
.security-setting-card{border:1px solid var(--line);border-radius:10px;padding:20px;margin:24px 0;background:var(--theme-surface, #fff)}
.security-setting-card>.mfa-row{padding:0;border-bottom:0}
.security-setting-card>#verified-password-form{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.security-setting-card>.hint{margin:16px 0 0}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.login-transitioning{padding-left:0}body.login-transitioning .dev-navigation,body.login-transitioning main>nav.screen-bottom,body.login-transitioning main>.actions,body.login-transitioning #notice{display:none}.login-transition{min-height:300px;display:flex;flex-direction:column;justify-content:center}.login-transition h1{margin-bottom:12px}
a.mfa-row-action{border:1px solid var(--theme-line, #b9cfdd);color:var(--theme-link, #175b7c)}
.mfa-pill{display:inline-block;border-radius:20px;font-size:12px;font-weight:700;padding:3px 12px;background:var(--theme-success-bg, #eff8f2);color:var(--ok)}
.mfa-pill.off{background:var(--theme-soft, #eef2f5);color:var(--muted);border:1px solid var(--line);font-weight:500}

/* 진행 표시. 모양만 담당하고 단계 수는 읽어 주는 글로 전한다. */
.mfa-steps{display:flex;gap:7px;list-style:none;padding:0;margin:0 0 22px}
.mfa-steps li{height:5px;flex:1;background:var(--theme-soft, #e6ecf1);border-radius:99px}
.mfa-steps li.done{background:var(--blue);opacity:.42}
.mfa-steps li.now{background:var(--blue)}
.mfa-offscreen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* 스토어 QR 두 개. 휴대폰 카메라로 찍는 화면. */
.mfa-stores{display:flex;gap:13px;flex-wrap:wrap;margin:20px 0 14px}
.mfa-store{flex:1 1 175px;background:var(--theme-soft, #f4f8fa);border:1px solid var(--line);border-radius:11px;padding:15px 13px;text-align:center}
.mfa-store strong{display:block;font-size:15px;margin-bottom:11px}
.mfa-store .mfa-store-frame{background:#fff;padding:9px;border-radius:8px;display:inline-block;line-height:0}
.mfa-store img{display:block;width:138px;height:138px;image-rendering:pixelated}
.mfa-store p{font-size:13px;color:var(--muted);margin:10px 0 0}
.mfa-app-name{text-align:center;margin:0}
.mfa-app-name span{color:var(--muted);font-size:14px}

/* 휴대폰 구글 OTP 화면의 오른쪽 아래 + 버튼을 그대로 알아볼 수 있게 그린다. */
.mfa-add-guide{display:flex;align-items:center;gap:13px;padding:14px 17px;border-radius:9px;background:var(--theme-soft, #f4f8fa);margin:0 0 20px;line-height:1.65}
.mfa-add-guide p{margin:0}
.mfa-google-add{display:inline-grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:#292b2e;box-shadow:0 4px 9px rgba(0,0,0,.2)}
.mfa-google-add svg{display:block;width:34px;height:34px}

/* 계정 연결 QR. 어두운 화면에서도 흰 바탕을 유지해야 앱이 읽는다. */
.mfa-qr-wrap{display:flex;justify-content:center;margin:20px 0}
.mfa-qr{background:#fff;padding:16px;border-radius:12px;border:1px solid var(--line);line-height:0}
.mfa-qr img{display:block;width:200px;height:200px;image-rendering:pixelated}
.mfa-manual{background:var(--theme-soft, #f4f8fa);border-radius:9px;padding:15px 17px;margin-top:13px}
.mfa-manual p{margin:0 0 8px;font-size:14px}
.mfa-secret{font-family:ui-monospace,Consolas,monospace;font-size:25px;font-weight:700;letter-spacing:.16em;word-spacing:.38em;word-break:break-word;line-height:1.9;margin:4px 0 0;color:var(--ink)}

/* 6자리 입력. 숫자가 커야 앱 화면과 눈으로 맞출 수 있다. */
.mfa-code-block{margin:22px 0 0}
.mfa-code-title{font-size:16px;color:var(--theme-link, var(--blue));margin:0 0 6px}
input.mfa-code-input{display:block;width:100%;max-width:420px;height:56px;box-sizing:border-box;font-family:ui-monospace,Consolas,monospace;font-size:31px;font-weight:700;letter-spacing:.3em;text-indent:.3em;text-align:center;padding:8px 10px;border:2px solid var(--line);border-radius:10px;margin:8px auto 0}
input.mfa-code-input::placeholder{font:inherit;letter-spacing:inherit;color:var(--muted);opacity:1}
input.mfa-code-input:focus{border-color:var(--blue)}
input.mfa-code-input[aria-invalid=true]{border-color:var(--error)}
.mfa-code-row{display:flex;align-items:stretch;gap:10px;width:100%;max-width:560px;margin:8px auto 0}
.mfa-code-row input.mfa-code-input{flex:1 1 auto;min-width:0;width:auto;max-width:none;margin:0}
.mfa-code-row button{flex:0 0 auto;min-width:112px}
.mfa-msg{margin:12px 0 0;font-size:14px;min-height:1.7em;overflow-wrap:anywhere}
.mfa-msg.bad{color:var(--error)}
.mfa-msg.ok{color:var(--ok)}
.mfa-msg:empty{display:none}
.mfa-deadline{font-size:13px;color:var(--muted);margin:10px 0 0}
.mfa-deadline b{font-variant-numeric:tabular-nums;color:var(--ink)}

/* 복구 번호. 한 번만 보여주므로 읽기와 옮겨 적기가 쉬워야 한다. */
.mfa-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:18px 0;padding:0;list-style:none}
.mfa-codes li{font-family:ui-monospace,Consolas,monospace;font-size:15px;font-weight:700;background:var(--theme-soft, #f4f8fa);border:1px solid var(--line);border-radius:7px;padding:11px 12px;text-align:center;overflow-wrap:anywhere}
.mfa-confirm{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;cursor:pointer;font-size:15px;line-height:1.6}
.mfa-confirm input{width:24px;height:24px;flex:none;margin:3px 0 0;accent-color:var(--blue)}

/* 선택 안내와 경고. note-box 계열과 같은 결로 맞춘다. */
.mfa-note{padding:16px 18px;border-radius:8px;border-left:3px solid var(--blue);background:var(--theme-info-bg, #eef6fa);font-size:14px;margin:18px 0}
.mfa-note.warning{border-left-color:var(--focus);background:var(--theme-warning-bg, #fff9ec)}
.mfa-note.mfa-recommendation{border:1px solid var(--focus);border-left-width:4px;background:var(--theme-warning-bg, #fff9ec);color:var(--ink);line-height:1.75}
.mfa-recommendation>strong{font-size:15px;color:var(--ink);margin-bottom:8px}
.mfa-recommendation p{margin:7px 0}
.mfa-recommendation b{color:var(--ink);font-weight:700}
.mfa-note.danger{border-left-color:var(--error);background:var(--theme-error-bg, #fdefed)}
.mfa-note.done{border-left-color:var(--ok);background:var(--theme-success-bg, #eff8f2)}
.mfa-note strong{display:block;margin-bottom:5px}
.mfa-note p{margin:5px 0}
.mfa-note p:last-child{margin-bottom:0}
.mfa-note a{font-weight:600}
.mfa-choice{margin:18px 0 0;font-size:14px}
.mfa-field{margin:18px 0 0}
.mfa-field label{margin-bottom:0}

@media(max-width:480px){
 .mfa-codes{grid-template-columns:1fr}
 .mfa-row{padding:16px 0}
 .mfa-row-action{width:100%}
 input.mfa-code-input{max-width:none;font-size:26px}
 .mfa-code-row{flex-direction:column}
 .mfa-code-row button{width:100%}
 .mfa-add-guide{align-items:flex-start;flex-wrap:wrap}
 .mfa-secret{font-size:21px;letter-spacing:.12em;word-spacing:.25em}
}

/* 복구 번호 인쇄. 화면 장식은 빼고 번호만 남긴다. */
@media print{
 body.mfa-printing{padding-left:0!important;background:#fff!important}
 body.mfa-printing .dev-navigation,
 body.mfa-printing .registration-header,
 body.mfa-printing .dev-note,
 body.mfa-printing nav.screen-bottom,
 body.mfa-printing footer,
 body.mfa-printing #notice,
 body.mfa-printing .theme-preference,
 body.mfa-printing .mfa-no-print{display:none!important}
 body.mfa-printing .shell{width:100%;max-width:none;margin:0;border:0;box-shadow:none;background:#fff}
 body.mfa-printing main{padding:0;background:#fff}
 body.mfa-printing .mfa-recommendation{margin:14px 0 18px;padding:12px 14px;border:1px solid #777;background:none;color:#111}
 body.mfa-printing .mfa-recommendation strong,
 body.mfa-printing .mfa-recommendation b{color:#111}
 body.mfa-printing .mfa-codes{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.mfa-printing .mfa-codes li{border:1px solid #999;background:none}
}