generated from ttipo/project-base
docs: 12단계 계정 보안 — 계약 5절 · 디자인 보드 넷 · README
2단계 인증(인증 앱 TOTP) · 앱 비밀번호 · 로그인 기록을 엔진(Stalwart 0.16.27) 실험 결과에 맞춰 정했다. 엔진이 코드 확인 · 메일 프로그램 막기 · 앱 비밀번호를 맡고, 서버는 첫 코드 확인 · 다시 쓰기 막기 · 실패 한도 · 기록을 맡는다. 사용자 결정(2026-10-31): 비밀번호를 바꾸면 앱 비밀번호도 지우고, 끊은 세션은 바로 막는다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,229 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>로그인 · 2단계 인증</title>
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
@font-face{font-family:'Pretendard';src:url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2-variations'),url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
|
||||
body{margin:0}
|
||||
a{color:#0E7C86}a:hover{color:#0A5F67}
|
||||
:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
|
||||
.primary{background:#0E7C86;color:#FFFFFF}
|
||||
.primary:hover{background:#0A5F67}
|
||||
.ghost{background:transparent;color:#4A5363}
|
||||
.ghost:hover{background:#F2F4F7;color:#171C26}
|
||||
.danger-solid{background:#B42318;color:#FFFFFF}
|
||||
.danger-solid:hover{background:#912018}
|
||||
.line-btn{background:#FFFFFF;color:#344054;border:1px solid #D0D5DD}
|
||||
.line-btn:hover{background:#F2F4F7}
|
||||
.line-danger{background:#FFFFFF;color:#B42318;border:1px solid #D0D5DD}
|
||||
.line-danger:hover{background:#FEF3F2}
|
||||
.menu-link{color:#344054}
|
||||
.menu-link:hover{background:#EEF0F3}
|
||||
.field{box-sizing:border-box;border:1px solid #D0D5DD;border-radius:8px;background:#FFFFFF;font:inherit;color:#171C26}
|
||||
.field:focus{outline:none;border-color:#0E7C86;box-shadow:0 0 0 1px #0E7C86}
|
||||
.field.is-error{border-color:#B42318}
|
||||
.pw-box:focus-within{border-color:#0E7C86 !important;box-shadow:0 0 0 1px #0E7C86}
|
||||
.pw-box.is-error{border-color:#B42318 !important}
|
||||
.pw-box.is-error:focus-within{box-shadow:0 0 0 1px #B42318}
|
||||
.pw-input{flex:1 1 auto;min-width:0;height:42px;border:0;outline:none;background:transparent;font:inherit;color:#171C26;padding:0 12px}
|
||||
.seg{background:transparent;color:#344054}
|
||||
.seg:hover{background:#F2F4F7}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 1990px; display: flex; flex-direction: column; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
|
||||
<div role="region" aria-label="화면 — 로그인 2단계 (코드 넣기)" style="flex: 0 0 auto; height: 900px; box-sizing: border-box; display: flex; flex-wrap: wrap; background: #FFFFFF; border-bottom: 1px solid #E6E8EC; overflow: hidden">
|
||||
|
||||
<section aria-label="ARA SYSTEM 소개" style="flex: 1 1 400px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; padding: 44px 48px 48px; background: #0B3640; color: #E6EFF0">
|
||||
<img src="/_blob/3a2f4115a8f90207faa7d3a51cd9aec2" alt="ARA SYSTEM" width="240" height="115" style="display: block; width: 240px; height: auto">
|
||||
<div style="display: flex; flex-direction: column; gap: 14px; max-width: 420px">
|
||||
<p style="margin: 0; font-size: 30px; line-height: 1.32; font-weight: 700; letter-spacing: -0.025em; color: #FFFFFF">사내 업무를<br>한 계정으로</p>
|
||||
<p style="margin: 0; font-size: 14px; line-height: 1.65; color: #A3C2C6">메일부터 시작해 캘린더, 파일 저장소, ERP까지 같은 계정으로 이어집니다.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main style="flex: 999 1 480px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 48px 24px">
|
||||
<div style="width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 22px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">2단계 인증</h1>
|
||||
<p style="margin: 0; color: #4A5363">비밀번호를 확인했습니다. 휴대폰 인증 앱에 표시된 코드를 넣어 주세요.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 48px; box-sizing: border-box; padding: 1px 1px 1px 12px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FBFBFC">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">ara.kim@arasystem.it.kr</span>
|
||||
<a href="Login.dc.html" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; text-decoration: none">다른 계정으로 로그인</a>
|
||||
</div>
|
||||
|
||||
<form style="display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="tf-code" style="font-size: 12.5px; font-weight: 600; color: #344054">인증 앱에 표시된 6자리 코드</label>
|
||||
<input id="tf-code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" value="" style="min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; font: inherit; font-size: 18px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; color: #171C26; background: #FFFFFF">
|
||||
</div>
|
||||
<button type="submit" class="primary" style="display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; border: 0; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">확인</button>
|
||||
</form>
|
||||
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">인증 앱을 쓸 수 없나요? 관리자에게 문의해 주세요.</p>
|
||||
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 12px; line-height: 1.6; color: #667085">Outlook · 휴대폰 메일 앱은 이 코드를 묻지 않습니다. 설정 › 앱 비밀번호에서 만든 비밀번호로 연결합니다.</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div style="box-sizing: border-box; padding: 44px 48px 48px; display: flex; flex-direction: column; gap: 28px">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; max-width: 1060px">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">로그인 · 2단계 인증</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">2단계 인증을 켠 직원은 비밀번호가 맞으면 위 화면으로 옵니다. 켜지 않은 직원은 지금처럼 바로 메일함으로 갑니다. 화면 틀 · 칸 · 단추는 로그인 화면과 같고, 오류 문구는 에러 코드 사전에서 가져옵니다. 2026-10-31 확정.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">코드 틀림</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">칸 아래 빨간 글 · 칸을 비우고 초점은 그 칸에 — 알림 없음</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 22px 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #FFFFFF">
|
||||
<div style="width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 22px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">2단계 인증</h1>
|
||||
<p style="margin: 0; color: #4A5363">비밀번호를 확인했습니다. 휴대폰 인증 앱에 표시된 코드를 넣어 주세요.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 48px; box-sizing: border-box; padding: 1px 1px 1px 12px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FBFBFC">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">ara.kim@arasystem.it.kr</span>
|
||||
<a href="Login.dc.html" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; text-decoration: none">다른 계정으로 로그인</a>
|
||||
</div>
|
||||
|
||||
<form style="display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="tf-code-wrong" style="font-size: 12.5px; font-weight: 600; color: #344054">인증 앱에 표시된 6자리 코드</label>
|
||||
<input id="tf-code-wrong" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" value="" aria-invalid="true" aria-describedby="tf-code-wrong-error" style="min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #B42318; border-radius: 8px; font: inherit; font-size: 18px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; color: #171C26; background: #FFFFFF; box-shadow: 0 0 0 1px #B42318">
|
||||
<p id="tf-code-wrong-error" style="margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: #B42318">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span>코드가 올바르지 않습니다. 휴대폰의 날짜와 시간이 「자동」으로 맞춰져 있는지 확인해 주세요.</span>
|
||||
</p>
|
||||
</div>
|
||||
<button type="submit" class="primary" style="display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; border: 0; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">확인</button>
|
||||
</form>
|
||||
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">인증 앱을 쓸 수 없나요? 관리자에게 문의해 주세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">인증 앱의 코드는 30초마다 바뀌고, 휴대폰 시계가 어긋나면 맞게 넣어도 틀립니다. 틀린 코드는 비밀번호 틀림과 따로 세고(같은 주소 15분 5회 · 하루 20회), 로그인 기록에 「실패 — 코드 틀림」으로 남습니다.</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">시도가 너무 많음</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">위쪽 빨간 상자 — 로그인 오류와 같은 자리 · 같은 모양</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 22px 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #FFFFFF">
|
||||
<div style="width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 22px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">2단계 인증</h1>
|
||||
<p style="margin: 0; color: #4A5363">비밀번호를 확인했습니다. 휴대폰 인증 앱에 표시된 코드를 넣어 주세요.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 48px; box-sizing: border-box; padding: 1px 1px 1px 12px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FBFBFC">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">ara.kim@arasystem.it.kr</span>
|
||||
<a href="Login.dc.html" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; text-decoration: none">다른 계정으로 로그인</a>
|
||||
</div>
|
||||
|
||||
<p role="alert" style="display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 8px; background: #FEF3F2; color: #B42318; font-size: 12.5px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 1px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span>요청이 너무 많습니다. 잠시 후 다시 시도해 주세요.</span>
|
||||
</p>
|
||||
|
||||
<form style="display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="tf-code-locked" style="font-size: 12.5px; font-weight: 600; color: #344054">인증 앱에 표시된 6자리 코드</label>
|
||||
<input id="tf-code-locked" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" value="" style="min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; font: inherit; font-size: 18px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; color: #171C26; background: #FFFFFF">
|
||||
</div>
|
||||
<button type="submit" class="primary" style="display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; border: 0; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">확인</button>
|
||||
</form>
|
||||
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">인증 앱을 쓸 수 없나요? 관리자에게 문의해 주세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">코드 실패 한도(같은 주소 15분 5회 · 하루 20회)를 넘었을 때입니다 — 문구는 사전의 「요청이 너무 많습니다」입니다. 막힌 동안 [확인]은 같은 안내를 다시 띄우고, 칸 · 단추는 그대로 둡니다 — 화면은 언제 풀리는지 모릅니다.</p>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">확인 중</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">단추 바쁨 · 칸은 읽기만</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 22px 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #FFFFFF">
|
||||
<div style="width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 22px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">2단계 인증</h1>
|
||||
<p style="margin: 0; color: #4A5363">비밀번호를 확인했습니다. 휴대폰 인증 앱에 표시된 코드를 넣어 주세요.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 48px; box-sizing: border-box; padding: 1px 1px 1px 12px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FBFBFC">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">ara.kim@arasystem.it.kr</span>
|
||||
<a href="Login.dc.html" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; text-decoration: none">다른 계정으로 로그인</a>
|
||||
</div>
|
||||
|
||||
<form style="display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="tf-code-busy" style="font-size: 12.5px; font-weight: 600; color: #344054">인증 앱에 표시된 6자리 코드</label>
|
||||
<input id="tf-code-busy" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" value="482913" readonly style="min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; font: inherit; font-size: 18px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; color: #171C26; background: #FFFFFF; background: #F8F9FB; color: #4A5363">
|
||||
</div>
|
||||
<button type="submit" disabled aria-busy="true" style="display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; border: 0; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 600; opacity: 0.7; cursor: progress">확인하는 중…</button>
|
||||
</form>
|
||||
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">인증 앱을 쓸 수 없나요? 관리자에게 문의해 주세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">로그인 단추와 같은 모양입니다(「로그인하는 중…」처럼 흐리게 · aria-busy). 맞으면 받은편지함으로 — 로그인 전에 가려던 주소가 있으면 그곳으로 갑니다.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">흐름 · 규칙</h2>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>비밀번호가 틀리면 지금처럼 「이메일 또는 비밀번호가 올바르지 않습니다.」 — 이 화면으로 오지 않습니다. 2단계 인증을 켰는지는 비밀번호가 맞은 뒤에야 드러납니다.</li>
|
||||
<li>[다른 계정으로 로그인] → 처음 로그인 화면(주소 칸은 비움). 확인한 비밀번호는 버립니다.</li>
|
||||
<li>칸은 숫자 6자리만 받습니다 — 붙여 넣은 글의 띄어쓰기 · 하이픈은 지웁니다. 휴대폰 · 암호 관리자의 코드 자동 채우기(one-time-code)를 켭니다.</li>
|
||||
<li>이 화면에 10분 넘게 머물면 [확인] 때 「다시 로그인해 주세요」와 함께 처음 화면으로 갑니다. 새로고침도 처음 화면으로 갑니다.</li>
|
||||
<li>이 브라우저 기억 · 복구 코드 · 문자 · 메일 코드는 두지 않습니다 — 로그인할 때마다 코드를 묻습니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">메일 프로그램 · 휴대폰을 잃었을 때</h2>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>Outlook · 썬더버드 · 휴대폰 메일 앱(IMAP · SMTP)은 이 단계를 거치지 않습니다. 2단계 인증을 켜면 웹메일 비밀번호로는 새로 연결할 수 없고 앱 비밀번호로만 연결합니다(설정 › 앱 비밀번호).</li>
|
||||
<li>휴대폰을 잃었거나 인증 앱을 지웠으면 관리자에게 문의합니다 — 관리자가 메일 서버 관리 화면에서 그 직원의 2단계 인증을 끄면, 비밀번호만으로 로그인한 뒤 새 휴대폰으로 다시 켭니다.</li>
|
||||
<li>로그인 기록: 코드까지 맞으면 「성공 · 2단계 인증」, 코드가 틀리면 「실패 — 코드 틀림」.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1990}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -662,6 +662,103 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
|
||||
- 확정본이 미룬 것: 기간 고르기 · 연장, 다시 보내기, 받는 사람 확인 코드 · 비밀번호, 사내만, 받는 사람별 링크 · 기록, 처음 받음 · 만료 전 알림, 미리 보기, zip 모두 받기,
|
||||
폴더 올리기, 관리자 화면 · 퇴사자 처리, 보낸 메일을 지울 때 파일도, 모바일 앱, 파일 저장소 연동.
|
||||
|
||||
## 12단계 — 계정 보안 (2026-10-31 확정 — `LoginTwoFactor` · `SettingsTwoFactor` · `SettingsAppPasswords` · `SettingsLoginHistory`)
|
||||
|
||||
2단계 인증(인증 앱 TOTP) · 앱 비밀번호 · 로그인 기록. 직원이 스스로 켠다 — 관리자가 전원에게 강제하는 것은 13단계다.
|
||||
데이터 · 규칙은 계약 5절(`docs/mail/api-contract.md` "계정 보안 — 12단계")이 정하고, 새 에러 코드(`AUTH_006`~`AUTH_009` — 계약 5절 "에러 코드")의 사전 문구 초안도 거기 있다.
|
||||
설정 메뉴의 계정 묶음: 비밀번호 · 2단계 인증 · 앱 비밀번호 · 로그인 기록(새 항목 아이콘: 방패(체크) · 열쇠 · 시계(되감기)).
|
||||
새 토큰은 없다 — 키 [복사] · 표의 [지우기] · [로그아웃] · 안내 상자 안 단추는 차단한 주소의 [차단 풀기]와 같은 밀도 예외 36(`--size-notice-action`)이다.
|
||||
각 보드 위쪽은 실제 크기 화면(설정 셸은 `SettingsAccount` 와 같다 — 메뉴 208 · 콘텐츠 열 800), 아래는 상태 카드다.
|
||||
|
||||
### 로그인 — 코드 단계 (`LoginTwoFactor`)
|
||||
|
||||
- **누가 오나**: 비밀번호가 맞고 2단계 인증을 켠 직원만. 켜지 않은 직원은 지금처럼 바로 메일함으로 간다.
|
||||
비밀번호가 틀리면 지금처럼 「이메일 또는 비밀번호가 올바르지 않습니다.」 — 2단계를 켰는지는 비밀번호가 맞은 뒤에야 드러난다.
|
||||
- **틀**은 로그인 화면과 같다. 위에서부터:
|
||||
- 제목 "2단계 인증" / "비밀번호를 확인했습니다. 휴대폰 인증 앱에 표시된 코드를 넣어 주세요."
|
||||
- 주소 + [다른 계정으로 로그인] — 처음 화면으로(주소 칸은 비움), 확인한 비밀번호는 버린다.
|
||||
- 칸 "인증 앱에 표시된 6자리 코드" — 숫자 6자리만, 붙여 넣은 글의 띄어쓰기 · 하이픈은 지운다. `inputmode="numeric"` · `autocomplete="one-time-code"`.
|
||||
- [확인] → "인증 앱을 쓸 수 없나요? 관리자에게 문의해 주세요." → "Outlook · 휴대폰 메일 앱은 이 코드를 묻지 않습니다. 설정 › 앱 비밀번호에서 만든 비밀번호로 연결합니다."
|
||||
- **상태**
|
||||
- 코드 틀림 — 칸 아래 빨간 글(`AUTH_006` 사전 문구 "코드가 올바르지 않습니다. 휴대폰의 날짜와 시간이 「자동」으로 맞춰져 있는지 확인해 주세요."). 칸을 비우고 초점은 그 칸, 알림은 없다.
|
||||
- 시도 과다 — 위쪽 빨간 상자(로그인 오류와 같은 자리 · 같은 모양)에 `REQ_001` 사전 문구. 코드 실패는 비밀번호 틀림과 따로 센다(같은 주소 15분 5회 · 하루 20회). 칸 · 단추는 그대로 둔다.
|
||||
- 확인 중 — 「확인하는 중…」(로그인 단추와 같은 모양 · `aria-busy`), 칸은 읽기만. 맞으면 받은편지함으로 — 로그인 전에 가려던 주소가 있으면 그곳으로.
|
||||
- 이 화면에 10분 넘게 머물면 [확인] 때 「다시 로그인해 주세요」와 함께 처음 화면으로 간다. 새로고침도 처음 화면이다(비밀번호는 화면 메모리에만 있다).
|
||||
- 로그인 기록에는 코드까지 맞으면 「성공 · 2단계 인증」, 틀리면 「실패 — 코드 틀림」으로 남는다.
|
||||
|
||||
### 설정 › 계정 › 2단계 인증 (`SettingsTwoFactor`)
|
||||
|
||||
- 머리 "2단계 인증" + "로그인할 때 비밀번호와 함께 휴대폰 인증 앱의 코드를 확인합니다. 비밀번호가 새어 나가도 휴대폰이 없으면 로그인할 수 없습니다."
|
||||
- **상태는 글자로만**(뱃지 · 스위치 없음) — 테두리 상자 하나:
|
||||
- 「꺼짐」(회색 굵게) / "지금은 로그인할 때 비밀번호만 확인합니다." + [2단계 인증 켜기]
|
||||
- 「켜짐 — 2026년 10월 31일부터」(초록 #067647 굵게 — 켠 때를 모르면 「켜짐」) / "로그인할 때마다 비밀번호와 인증 앱의 코드를 확인합니다." + [2단계 인증 끄기]
|
||||
- **꺼져 있을 때** 상자 아래:
|
||||
- 갈색 경고 "켜면 메일 프로그램은 앱 비밀번호로 다시 연결해야 합니다" / "Outlook · 썬더버드 · 휴대폰 메일 앱은 웹메일 비밀번호로 새로 연결할 수 없고, 이미 연결해 둔 프로그램도 다음에 다시 연결할 때 막힙니다. 켜기 전에 앱 비밀번호를 만들어 두면 편합니다."(앱 비밀번호 링크)
|
||||
- 「켜는 차례」 1 · 2 · 3(청록 굵은 숫자 — 동그라미 없음): 인증 앱 설치(Google · Microsoft Authenticator 처럼 6자리 코드를 만드는 앱) → [2단계 인증 켜기]를 눌러 QR 찍기 → 코드와 지금 비밀번호를 넣으면 켜진다.
|
||||
- **켜져 있을 때** 상자 아래: "휴대폰을 바꿀 때는 2단계 인증을 끈 뒤 새 휴대폰으로 다시 켜 주세요 — 끌 때 지금 휴대폰의 코드가 필요합니다." · "휴대폰을 잃어버렸거나 인증 앱을 지웠으면 관리자에게 문의해 주세요." · "메일 프로그램은 앱 비밀번호로 연결합니다."
|
||||
- **켜기 창**(모달 620 — `wide`, 필터 고치기 창과 같은 폭 · 처음 초점은 코드 칸)
|
||||
- ① "인증 앱으로 QR 코드를 찍어 주세요" / "인증 앱에서 [+] → 「QR 코드 스캔」을 고르고 이 그림을 찍습니다." + QR 그림
|
||||
- "찍을 수 없으면 이 키를 입력하세요" + 32자 키(4자씩 띄움, 고정폭) + [복사](36 — 「키를 복사했습니다.」) + "앱에는 「ARA SYSTEM (ara.kim@arasystem.it.kr)」로 저장됩니다."
|
||||
- ② "앱에 표시된 6자리 코드" ③ "지금 비밀번호" → [켜기] [취소]
|
||||
- 칸 아래 오류(알림 없이, 첫 잘못된 칸에 초점): 코드 `AUTH_006` · 지금 비밀번호 `AUTH_005`("지금 비밀번호가 올바르지 않습니다."). 둘 다 틀렸으면 코드부터 — 서버가 코드를 먼저 본다.
|
||||
틀린 코드는 지우고 그 칸에 초점을 둔다. QR · 키는 그대로라 다시 찍지 않아도 된다. 비밀번호 틀림은 로그인 실패와 함께, 코드 틀림은 코드 실패로 따로 센다.
|
||||
- 켜는 동안 「켜는 중…」 · [취소]. 맞으면 창을 닫고 화면이 「켜짐」이 되며, 위에 안내 상자 "2단계 인증을 켰습니다" / "메일 프로그램(Outlook · 썬더버드 · 휴대폰 메일 앱)은 다시 연결할 때 앱 비밀번호가 필요합니다." [앱 비밀번호 만들기](36) — 이 화면을 떠나면 사라진다.
|
||||
- 키는 창을 열 때마다 새로 만든다(10분 안에 켠다 — 지나면 `AUTH_008` 로 처음부터). 켜지 않고 닫으면 그 키는 버린다 — 앱에 먼저 저장한 항목은 지워 달라고 안내한다. QR · 키는 이 창에만 보이고 로그에 남기지 않는다.
|
||||
- 켜도 다른 곳의 웹메일 로그인은 끊지 않는다 — 끊으려면 로그인 기록에서.
|
||||
- **끄기 창**(alertdialog 400 · 처음 초점 「취소」, Esc 도 같다): "2단계 인증을 끌까요?" / "끄면 비밀번호만으로 로그인합니다. 만들어 둔 앱 비밀번호는 그대로 남습니다." + 지금 비밀번호 · 인증 앱 코드 → [끄기](빨강) [취소].
|
||||
끄면 「2단계 인증을 껐습니다.」 — 화면은 「꺼짐」. 틀리면 켜기 창과 같은 칸 아래 글이다.
|
||||
- **비밀번호 화면**(설정 › 비밀번호)
|
||||
- 2단계 인증을 켠 직원: 지금 양식 맨 아래에 「인증 앱 코드」 칸 + "코드는 30초마다 바뀝니다 — 다른 칸을 다 쓴 뒤 넣어 주세요."
|
||||
머리 설명은 "웹메일에 로그인하는 비밀번호입니다. 2단계 인증이 켜져 있어 메일 프로그램은 앱 비밀번호로 연결합니다." 다른 탭에서 켜서 `AUTH_007` 이 오면 2단계 상태를 다시 받아 코드 칸을 보인다.
|
||||
- 모든 직원: 단추 아래 "바꾸면 이 브라우저를 뺀 다른 기기 · 브라우저의 웹메일 로그인이 끊깁니다." "앱 비밀번호도 모두 지워집니다 — 메일 프로그램은 새 앱 비밀번호로 다시 연결해 주세요."
|
||||
|
||||
### 설정 › 계정 › 앱 비밀번호 (`SettingsAppPasswords`)
|
||||
|
||||
- 머리 "앱 비밀번호" + "Outlook · 썬더버드 · 휴대폰 메일 앱 같은 메일 프로그램에 넣는 비밀번호입니다. 프로그램마다 따로 만들어 두면, 기기를 잃었을 때 그것만 지울 수 있습니다."
|
||||
오른쪽 "3 / 5개" + [앱 비밀번호 만들기].
|
||||
- **표**(구현은 실제 table): 이름 · 만든 날 · 마지막 사용 · [지우기](36, 빨간 글). 최근에 만든 것이 위, 긴 이름은 말줄임.
|
||||
마지막 사용은 "오늘 오전 9:12 · IMAP · 211.186.95.252" — 쓰지 않았으면 "아직 쓰지 않음"(회색, 오래 쓰지 않은 줄은 지워도 된다는 신호).
|
||||
- **메일 프로그램 설정값 상자**: 받는 메일(IMAP) `mx1.arasystem.it.kr` · 포트 993 · SSL/TLS / 보내는 메일(SMTP) `mx1.arasystem.it.kr` · 포트 465 · SSL/TLS /
|
||||
사용자 이름 = 메일 주소 전체 / 비밀번호 = 여기서 만든 앱 비밀번호 — 웹메일 비밀번호가 아닙니다. 호스트 · 포트는 화면 상수 하나에 둔다(전 직원 전환 때 다시 본다).
|
||||
- **아래 안내**: "앱 비밀번호는 메일 읽기 · 보내기(IMAP · SMTP)에만 쓰입니다. 웹메일 로그인에는 쓸 수 없습니다." · "2단계 인증을 켜면 메일 프로그램은 앱 비밀번호로만 연결합니다. 켜지 않아도 만들어 쓸 수 있습니다." ·
|
||||
"웹메일 비밀번호를 바꾸면 앱 비밀번호도 모두 지워집니다 — 메일 프로그램마다 새로 만들어 주세요." · "휴대폰이나 PC 를 잃어버렸으면 그 기기의 앱 비밀번호를 바로 지워 주세요."
|
||||
- **5개를 모두 만들었을 때**: [앱 비밀번호 만들기]는 `aria-disabled` + 머리 아래 한 줄 "5개까지 만들 수 있습니다. 쓰지 않는 앱 비밀번호를 지운 뒤 만들어 주세요." — 누르면 창을 열지 않고 까닭을 읽어 준다(role=status).
|
||||
- **빈 상태**: "0 / 5개" + "만든 앱 비밀번호가 없습니다" / "Outlook · 휴대폰 메일 앱에서 메일을 보려면 앱 비밀번호를 만들어 주세요. 2단계 인증을 켰다면 메일 프로그램은 앱 비밀번호로만 연결합니다."
|
||||
설정값 상자 · 아래 안내는 그대로. 목록을 받지 못하면 지금의 목록 오류와 같은 모양(사전 문구 + [다시 시도]) — 그동안 [만들기]는 막는다(개수를 모르므로).
|
||||
- **만들기 창**(400 · 처음 초점 이름 칸): 「이름」 + "어느 프로그램 · 기기에서 쓰는지 알아볼 이름입니다. 40자까지." → [만들기] [취소].
|
||||
칸 아래: "이름을 넣어 주세요." · "같은 이름의 앱 비밀번호가 있습니다."(앞뒤 공백을 지운 값으로 화면이 먼저 본다) · 그사이 다른 창에서 5개를 채웠으면 `AUTH_009` 사전 문구.
|
||||
- **만든 결과 창**(620 · 처음 초점 [복사]): "앱 비밀번호를 만들었습니다" / "‘회사 PC 아웃룩’ — 메일 프로그램의 비밀번호 칸에 아래 값을 넣어 주세요."
|
||||
- 값은 고정폭으로 4자씩 떨어뜨려 보이지만 띄어쓰기는 없다 — [복사](36)는 40자 그대로. "40자입니다. 보기 좋게 4자씩 띄웠지만 띄어쓰기는 없습니다."
|
||||
- 경고 "이 창을 닫으면 다시 볼 수 없습니다. 잊어버리면 지우고 새로 만들어 주세요." + 설정값 요약 + [닫기].
|
||||
- 복사 「앱 비밀번호를 복사했습니다.」 / 못 하면 「앱 비밀번호를 복사하지 못했습니다. 값을 직접 골라 복사해 주세요.」
|
||||
- [닫기] · Esc 로 닫으면 목록 맨 위에 새 줄이 생기고 값은 화면 메모리에서도 지운다. 복사하지 않고 닫아도 다시 묻지 않는다.
|
||||
- **지우기 확인**(alertdialog 400 · 처음 초점 「취소」): "‘휴대폰 메일 앱’ 앱 비밀번호를 지울까요?" / "이 비밀번호로 연결한 메일 프로그램은 다음 연결부터 로그인하지 못합니다. 지운 비밀번호는 되돌릴 수 없습니다."
|
||||
[지우기](빨강) [취소] → 「‘휴대폰 메일 앱’ 앱 비밀번호를 지웠습니다.」 — 줄이 빠지고 개수가 준다(되돌리기 없음).
|
||||
|
||||
### 설정 › 계정 › 로그인 기록 (`SettingsLoginHistory`)
|
||||
|
||||
- 머리 "로그인 기록" + "최근 90일 동안의 로그인입니다. 모르는 기록이 있으면 바로 비밀번호를 바꾸고, 2단계 인증이 꺼져 있으면 켜 주세요."(두 링크).
|
||||
- **로그인된 브라우저**: 「로그인된 브라우저」 + "웹메일 3곳" · 오른쪽 [다른 곳 모두 로그아웃](44).
|
||||
- 줄마다 PC · 휴대폰 아이콘(16) · 브라우저 · 운영체제 / IP / 마지막 활동 / [로그아웃](36). 맨 위는 지금 이 브라우저 — 단추 대신 「지금 이 브라우저」 글자만. 모르면 "알 수 없는 브라우저".
|
||||
- 아래 "웹메일 로그인만 보입니다. 메일 프로그램은 앱 비밀번호를 지워 끊습니다."(링크)
|
||||
- 줄의 [로그아웃]은 묻지 않고 바로 끊는다 → 「‘Edge · Windows’의 로그인을 끊었습니다.」(되돌리기 없음). 끊은 줄은 빠지고, 다른 곳이 없으면 [다른 곳 모두 로그아웃]을 그리지 않는다.
|
||||
- [다른 곳 모두 로그아웃] → 확인(alertdialog 400 · 처음 초점 「취소」) "다른 곳의 로그인을 모두 끊을까요?" /
|
||||
"이 브라우저를 뺀 2곳(Edge · Windows, Safari · iPhone)의 웹메일 로그인을 끊습니다. 끊긴 곳은 다음 동작에서 바로 로그인 화면으로 돌아갑니다." "메일 프로그램은 끊기지 않습니다 — 앱 비밀번호를 지워 끊어 주세요."
|
||||
[모두 로그아웃](청록 주 단추 — 데이터를 지우는 일이 아니다) [취소] → 「다른 곳의 로그인 2곳을 끊었습니다.」
|
||||
- 끊긴 브라우저는 다음 요청에서 바로 로그인 화면으로 간다(열린 실시간 알림도 30초 안에) — 계약 5절 "로그인된 브라우저".
|
||||
- **최근 로그인**: 「최근 로그인」 + "최근 90일 · 웹메일과 메일 프로그램" · 오른쪽 전환 [전체 · 실패만](`.segmented`). 표: 시각 · 방식 · IP · 기기 · 결과.
|
||||
- 방식: "웹메일" / "메일 프로그램 · IMAP" · "메일 프로그램 · SMTP" + 앱 비밀번호로 들어왔으면 아래 줄 "앱 비밀번호 ‘회사 PC 아웃룩’"(지운 앱 비밀번호도 그 이름 그대로).
|
||||
- 기기: 웹메일은 "Chrome · Windows", 메일 프로그램은 "—". 나라 · 지역은 보이지 않는다.
|
||||
- 결과: 「성공」 · 「성공 · 2단계 인증」 · 「실패 — 비밀번호 틀림」 · 「실패 — 코드 틀림」 · 「실패 — 앱 비밀번호 필요」(2단계를 켠 계정에 메일 프로그램이 웹메일 비밀번호로 연결하려 함). 실패는 빨간 굵은 글자만 — 뱃지 없음.
|
||||
- 최근 순서 · 20개씩 [더 보기](44). 「실패만」이면 "최근 90일 · 실패 4번", [더 보기]도 실패만 이어서.
|
||||
- 빈 상태(실패만): "최근 90일 동안 실패한 로그인이 없습니다" / "[전체]를 누르면 성공한 로그인도 봅니다." 기록은 이 기능을 배포한 날부터 쌓인다.
|
||||
- 목록을 받지 못하면 지금의 목록 오류와 같은 모양(사전 문구 + [다시 시도]).
|
||||
|
||||
### 처음 판에서 미룬 것
|
||||
|
||||
복구 코드, 이 브라우저 기억, 문자 · 메일 코드, 보안 키 · 패스키, 관리자가 2단계 인증을 강제하기(13단계), 켜진 채 휴대폰 바꾸기, 앱 비밀번호 이름 바꾸기 · 만료,
|
||||
새 기기 로그인 알림 메일, 계정 변경 기록(비밀번호 바꾸기 · 2단계 켜기 등), 로그인 기록의 나라 · 지역.
|
||||
|
||||
## 구현하며 정한 보완 (2026-10-26 — 캔버스에는 아직 없다)
|
||||
|
||||
- 찾지 못한 첨부(보관 시간이 지난 업로드·지워진 원본)는 실패로 표시하고, 전달 원본에는 "빼기"만 둔다(다시 올릴 수 없다).
|
||||
|
||||
@@ -0,0 +1,464 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>설정 · 앱 비밀번호</title>
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
@font-face{font-family:'Pretendard';src:url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2-variations'),url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
|
||||
body{margin:0}
|
||||
a{color:#0E7C86}a:hover{color:#0A5F67}
|
||||
:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
|
||||
.primary{background:#0E7C86;color:#FFFFFF}
|
||||
.primary:hover{background:#0A5F67}
|
||||
.ghost{background:transparent;color:#4A5363}
|
||||
.ghost:hover{background:#F2F4F7;color:#171C26}
|
||||
.danger-solid{background:#B42318;color:#FFFFFF}
|
||||
.danger-solid:hover{background:#912018}
|
||||
.line-btn{background:#FFFFFF;color:#344054;border:1px solid #D0D5DD}
|
||||
.line-btn:hover{background:#F2F4F7}
|
||||
.line-danger{background:#FFFFFF;color:#B42318;border:1px solid #D0D5DD}
|
||||
.line-danger:hover{background:#FEF3F2}
|
||||
.menu-link{color:#344054}
|
||||
.menu-link:hover{background:#EEF0F3}
|
||||
.field{box-sizing:border-box;border:1px solid #D0D5DD;border-radius:8px;background:#FFFFFF;font:inherit;color:#171C26}
|
||||
.field:focus{outline:none;border-color:#0E7C86;box-shadow:0 0 0 1px #0E7C86}
|
||||
.field.is-error{border-color:#B42318}
|
||||
.pw-box:focus-within{border-color:#0E7C86 !important;box-shadow:0 0 0 1px #0E7C86}
|
||||
.pw-box.is-error{border-color:#B42318 !important}
|
||||
.pw-box.is-error:focus-within{box-shadow:0 0 0 1px #B42318}
|
||||
.pw-input{flex:1 1 auto;min-width:0;height:42px;border:0;outline:none;background:transparent;font:inherit;color:#171C26;padding:0 12px}
|
||||
.seg{background:transparent;color:#344054}
|
||||
.seg:hover{background:#F2F4F7}
|
||||
.ap-grid{display:grid;grid-template-columns:minmax(0,1fr) 88px 264px 72px;column-gap:12px;align-items:center}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 2810px; display: flex; flex-direction: column; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
|
||||
<div role="region" aria-label="화면 — 설정 › 앱 비밀번호 (3개)" style="flex: 0 0 auto; height: 900px; box-sizing: border-box; display: flex; background: #FFFFFF; border-bottom: 1px solid #E6E8EC; overflow: hidden">
|
||||
|
||||
<nav aria-label="사내 시스템" style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
|
||||
<a href="Main.dc.html" style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px; border-radius: 10px; text-decoration: none">
|
||||
<img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
|
||||
</a>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px">
|
||||
<li>
|
||||
<a href="Main.dc.html" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
<span>메일</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
<span>캘린더</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span>파일</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
|
||||
<span>ERP</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Contacts.dc.html" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
||||
<span>주소록</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="Settings.dc.html" aria-current="page" style="margin-top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||
<span>설정</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
|
||||
<header style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC">
|
||||
<span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">설정</span>
|
||||
<div style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
<input type="search" aria-label="통합 검색" placeholder="통합 검색" style="flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; color: #171C26">
|
||||
</div>
|
||||
<div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 13px; font-weight: 600">김</span>
|
||||
<div style="display: flex; flex-direction: column; line-height: 1.3">
|
||||
<span style="font-weight: 600">김아라</span>
|
||||
<span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
|
||||
</div>
|
||||
<a href="Login.dc.html" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #4A5363; font-weight: 500; text-decoration: none">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
<span>로그아웃</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style="flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: stretch">
|
||||
|
||||
<nav aria-label="설정 메뉴" style="flex: 1 1 208px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
|
||||
<p style="margin: 4px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">계정</p>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<li><a href="SettingsAccount.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
||||
<span>비밀번호</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsTwoFactor.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><polyline points="9 12 11 14 15 10"></polyline></svg>
|
||||
<span>2단계 인증</span>
|
||||
</a></li>
|
||||
<li><a href="#" aria-current="page" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; background: #E3F2F3; color: #0A5F67; font-weight: 600; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
|
||||
<span>앱 비밀번호</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsLoginHistory.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg>
|
||||
<span>로그인 기록</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
<p style="margin: 14px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">메일</p>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<li><a href="Settings.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
||||
<span>서명</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsVacation.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><line x1="10" y1="14" x2="14" y2="18"></line><line x1="14" y1="14" x2="10" y2="18"></line></svg>
|
||||
<span>부재중 자동 응답</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsFilter.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
|
||||
<span>필터</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsSendRead.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
|
||||
<span>보내기 · 읽기</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsSendRead.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
|
||||
<span>차단한 주소</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsLargeFiles.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span>대용량 첨부</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsNotify.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
|
||||
<span>알림</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main style="flex: 999 1 560px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column">
|
||||
<div style="max-width: 800px; box-sizing: border-box; padding: 20px 32px 36px; display: flex; flex-direction: column; gap: 22px">
|
||||
|
||||
<div style="display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 20px">
|
||||
<div style="flex: 1 1 360px; display: flex; flex-direction: column; gap: 4px">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">앱 비밀번호</h1>
|
||||
<p style="margin: 0; color: #4A5363">Outlook · 썬더버드 · 휴대폰 메일 앱 같은 메일 프로그램에 넣는 비밀번호입니다. 프로그램마다 따로 만들어 두면, 기기를 잃었을 때 그것만 지울 수 있습니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<span style="font-size: 12.5px; color: #667085; font-variant-numeric: tabular-nums">3 / 5개</span>
|
||||
<button type="button" class="primary" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
<span>앱 비밀번호 만들기</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<div aria-hidden="true" class="ap-grid" style="height: 32px; box-sizing: border-box; padding: 0 8px 0 14px; background: #FBFBFC; border-bottom: 1px solid #E6E8EC; font-size: 12px; font-weight: 600; color: #667085">
|
||||
<span>이름</span>
|
||||
<span>만든 날</span>
|
||||
<span>마지막 사용</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<ul aria-label="앱 비밀번호 — 최근에 만든 차례" style="list-style: none; margin: 0; padding: 0">
|
||||
<li class="ap-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">노트북 썬더버드</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">10월 31일</span>
|
||||
<span style="font-size: 12.5px; color: #667085">아직 쓰지 않음</span>
|
||||
<button type="button" class="line-danger" aria-label="‘노트북 썬더버드’ 앱 비밀번호 지우기" style="justify-self: end; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
<li class="ap-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">회사 PC 아웃룩</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">10월 27일</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums">오늘 오전 9:12 · IMAP · 211.186.95.252</span>
|
||||
<button type="button" class="line-danger" aria-label="‘회사 PC 아웃룩’ 앱 비밀번호 지우기" style="justify-self: end; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
<li class="ap-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">휴대폰 메일 앱</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">10월 20일</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums">어제 오후 6:40 · SMTP · 223.38.120.77</span>
|
||||
<button type="button" class="line-danger" aria-label="‘휴대폰 메일 앱’ 앱 비밀번호 지우기" style="justify-self: end; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby="ap-setup-title" style="display: flex; flex-direction: column; gap: 8px">
|
||||
<h2 id="ap-setup-title" style="margin: 0; font-size: 14px; font-weight: 700">메일 프로그램 설정값</h2>
|
||||
<dl style="margin: 0; display: grid; grid-template-columns: 136px minmax(0, 1fr); box-sizing: border-box; border: 1px solid #EEF0F3; border-radius: 8px">
|
||||
<dt style="padding: 9px 14px; border-bottom: 1px solid #EEF0F3; color: #4A5363">받는 메일 (IMAP)</dt>
|
||||
<dd style="margin: 0; padding: 9px 14px; border-bottom: 1px solid #EEF0F3"><span style="font-weight: 600">mx1.arasystem.it.kr</span> · 포트 993 · SSL/TLS</dd>
|
||||
<dt style="padding: 9px 14px; border-bottom: 1px solid #EEF0F3; color: #4A5363">보내는 메일 (SMTP)</dt>
|
||||
<dd style="margin: 0; padding: 9px 14px; border-bottom: 1px solid #EEF0F3"><span style="font-weight: 600">mx1.arasystem.it.kr</span> · 포트 465 · SSL/TLS</dd>
|
||||
<dt style="padding: 9px 14px; border-bottom: 1px solid #EEF0F3; color: #4A5363">사용자 이름</dt>
|
||||
<dd style="margin: 0; padding: 9px 14px; border-bottom: 1px solid #EEF0F3"><span style="font-weight: 600">ara.kim@arasystem.it.kr</span> — 메일 주소 전체</dd>
|
||||
<dt style="padding: 9px 14px; color: #4A5363">비밀번호</dt>
|
||||
<dd style="margin: 0; padding: 9px 14px">여기서 만든 앱 비밀번호 — 웹메일 비밀번호가 아닙니다</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; padding: 14px 16px; border-radius: 10px; background: #F3F8F8; color: #344054">
|
||||
<p style="margin: 0; display: flex; gap: 8px"><span aria-hidden="true">·</span><span>앱 비밀번호는 메일 읽기 · 보내기(IMAP · SMTP)에만 쓰입니다. 웹메일 로그인에는 쓸 수 없습니다.</span></p>
|
||||
<p style="margin: 0; display: flex; gap: 8px"><span aria-hidden="true">·</span><span>2단계 인증을 켜면 메일 프로그램은 앱 비밀번호로만 연결합니다. 켜지 않아도 만들어 쓸 수 있습니다.</span></p>
|
||||
<p style="margin: 0; display: flex; gap: 8px"><span aria-hidden="true">·</span><span>웹메일 비밀번호를 바꾸면 앱 비밀번호도 모두 지워집니다 — 메일 프로그램마다 새로 만들어 주세요.</span></p>
|
||||
<p style="margin: 0; display: flex; gap: 8px"><span aria-hidden="true">·</span><span>휴대폰이나 PC 를 잃어버렸으면 그 기기의 앱 비밀번호를 바로 지워 주세요.</span></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="box-sizing: border-box; padding: 44px 48px 48px; display: flex; flex-direction: column; gap: 28px">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; max-width: 1060px">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">설정 · 앱 비밀번호</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">위 화면은 3개를 만든 상태입니다. 값은 메일 서버가 만든 40자(app_ 로 시작)이고 만들 때 한 번만 보입니다. 이름은 꼭 붙이고 5개까지 둡니다. 메일 읽기 · 보내기(IMAP · SMTP)에만 쓰이고, 2단계 인증을 켜지 않은 직원도 만들 수 있습니다. 메뉴는 계정 묶음의 「앱 비밀번호」(2단계 인증 아래). 2026-10-31 확정.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 800px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="5개를 모두 만들었을 때" style="display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px; overflow: hidden">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 32px; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">5개를 모두 만들었을 때</h2>
|
||||
<span style="font-size: 12px; color: #667085">[앱 비밀번호 만들기]는 aria-disabled — 까닭은 머리 아래 한 줄 · 콘텐츠 열 800</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 22px; padding: 20px 32px 36px">
|
||||
<div style="display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 20px">
|
||||
<div style="flex: 1 1 360px; display: flex; flex-direction: column; gap: 4px">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">앱 비밀번호</h1>
|
||||
<p style="margin: 0; color: #4A5363">Outlook · 썬더버드 · 휴대폰 메일 앱 같은 메일 프로그램에 넣는 비밀번호입니다. 프로그램마다 따로 만들어 두면, 기기를 잃었을 때 그것만 지울 수 있습니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<span style="font-size: 12.5px; color: #667085; font-variant-numeric: tabular-nums">5 / 5개</span>
|
||||
<button type="button" aria-disabled="true" aria-describedby="ap-full-why" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: #D0D5DD; color: #FFFFFF; font: inherit; font-weight: 600; cursor: not-allowed">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
<span>앱 비밀번호 만들기</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="ap-full-why" style="margin: -10px 0 0; font-size: 12.5px; color: #4A5363">5개까지 만들 수 있습니다. 쓰지 않는 앱 비밀번호를 지운 뒤 만들어 주세요.</p>
|
||||
|
||||
<div style="border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<div aria-hidden="true" class="ap-grid" style="height: 32px; box-sizing: border-box; padding: 0 8px 0 14px; background: #FBFBFC; border-bottom: 1px solid #E6E8EC; font-size: 12px; font-weight: 600; color: #667085">
|
||||
<span>이름</span>
|
||||
<span>만든 날</span>
|
||||
<span>마지막 사용</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<ul aria-label="앱 비밀번호 — 5개" style="list-style: none; margin: 0; padding: 0">
|
||||
<li class="ap-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">태블릿 메일 앱</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">10월 31일</span>
|
||||
<span style="font-size: 12.5px; color: #667085">아직 쓰지 않음</span>
|
||||
<button type="button" class="line-danger" aria-label="‘태블릿 메일 앱’ 앱 비밀번호 지우기" style="justify-self: end; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
<li class="ap-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">노트북 썬더버드</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">10월 31일</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums">오늘 오전 9:40 · IMAP · 211.186.95.252</span>
|
||||
<button type="button" class="line-danger" aria-label="‘노트북 썬더버드’ 앱 비밀번호 지우기" style="justify-self: end; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
<li class="ap-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">회사 PC 아웃룩</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">10월 27일</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums">오늘 오전 9:12 · IMAP · 211.186.95.252</span>
|
||||
<button type="button" class="line-danger" aria-label="‘회사 PC 아웃룩’ 앱 비밀번호 지우기" style="justify-self: end; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
<li class="ap-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">휴대폰 메일 앱</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">10월 20일</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums">어제 오후 6:40 · SMTP · 223.38.120.77</span>
|
||||
<button type="button" class="line-danger" aria-label="‘휴대폰 메일 앱’ 앱 비밀번호 지우기" style="justify-self: end; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
<li class="ap-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">집 PC 아웃룩</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">9월 2일</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums">10월 3일 오후 8:15 · IMAP · 121.134.7.88</span>
|
||||
<button type="button" class="line-danger" aria-label="‘집 PC 아웃룩’ 앱 비밀번호 지우기" style="justify-self: end; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">빈 상태</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">아직 하나도 만들지 않았을 때 — 설정값 상자 · 아래 안내는 그대로</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-bottom: 12px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="flex: 1 1 140px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em">앱 비밀번호</span>
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<span style="font-size: 12.5px; color: #667085; font-variant-numeric: tabular-nums">0 / 5개</span>
|
||||
<button type="button" class="primary" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
<span>앱 비밀번호 만들기</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #FBFBFC; text-align: center">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
|
||||
<p style="margin: 4px 0 0; font-weight: 600">만든 앱 비밀번호가 없습니다</p>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">Outlook · 휴대폰 메일 앱에서 메일을 보려면 앱 비밀번호를 만들어 주세요. 2단계 인증을 켰다면 메일 프로그램은 앱 비밀번호로만 연결합니다.</p>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">목록을 받지 못하면 지금의 목록 오류와 같은 모양 — 사전 문구 + [다시 시도]. 그동안 [만들기]는 막습니다(개수를 모르므로).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 684px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">만든 결과 창</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">모달 620 · 값은 이 창에서 한 번만 · 처음 초점 [복사]</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 20px 12px; border-radius: 10px; background: rgba(16, 24, 28, 0.08)">
|
||||
<div role="dialog" aria-modal="true" aria-labelledby="ap-made-title" aria-describedby="ap-made-message" style="width: 100%; max-width: 620px; box-sizing: border-box; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14); display: flex; flex-direction: column; gap: 12px">
|
||||
<h3 id="ap-made-title" style="margin: 0; font-size: 15px; font-weight: 700">앱 비밀번호를 만들었습니다</h3>
|
||||
<p id="ap-made-message" style="margin: 0; color: #4A5363">‘회사 PC 아웃룩’ — 메일 프로그램의 비밀번호 칸에 아래 값을 넣어 주세요.</p>
|
||||
<div style="display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 1px solid #D0D5DD; border-radius: 8px; background: #F8F9FB">
|
||||
<code id="ap-made-value" style="flex: 1 1 auto; min-width: 0; font-family: Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 15px; line-height: 1.6; color: #171C26"><span style="margin-right: 6px">app_</span><span style="margin-right: 6px">7qm2</span><span style="margin-right: 6px">xk9v</span><span style="margin-right: 6px">tn3w</span><span style="margin-right: 6px">pl1s</span><span style="margin-right: 6px">rb3h</span><span style="margin-right: 6px">cy7d</span><span style="margin-right: 6px">jf2g</span><span style="margin-right: 6px">az1e</span><span>uk0n</span></code>
|
||||
<button type="button" class="line-btn" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; outline: 2px solid #0E7C86; outline-offset: 2px">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
<span>복사</span>
|
||||
</button>
|
||||
</div>
|
||||
<p style="margin: -4px 0 0; font-size: 12px; color: #667085">40자입니다. 보기 좋게 4자씩 띄웠지만 띄어쓰기는 없습니다.</p>
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #FFF7E6; color: #7A5200">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
||||
<span style="flex: 1 1 auto"><strong style="font-weight: 600">이 창을 닫으면 다시 볼 수 없습니다.</strong> 잊어버리면 지우고 새로 만들어 주세요.</span>
|
||||
</div>
|
||||
<dl style="margin: 0; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 6px 12px; padding-top: 12px; border-top: 1px solid #EEF0F3; font-size: 12.5px">
|
||||
<dt style="color: #667085">받는 메일 (IMAP)</dt>
|
||||
<dd style="margin: 0; color: #344054">mx1.arasystem.it.kr · 993 · SSL/TLS</dd>
|
||||
<dt style="color: #667085">보내는 메일 (SMTP)</dt>
|
||||
<dd style="margin: 0; color: #344054">mx1.arasystem.it.kr · 465 · SSL/TLS</dd>
|
||||
<dt style="color: #667085">사용자 이름</dt>
|
||||
<dd style="margin: 0; color: #344054">ara.kim@arasystem.it.kr</dd>
|
||||
</dl>
|
||||
<div style="display: flex; justify-content: flex-end; margin-top: 4px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 20px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">닫기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="status" style="display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; font-weight: 500">앱 비밀번호를 복사했습니다.</span>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">[닫기] · Esc 로 닫으면 목록 맨 위에 새 줄이 생기고 값은 다시 볼 수 없습니다 — 복사하지 않고 닫아도 다시 묻지 않습니다. 복사하지 못하면 「앱 비밀번호를 복사하지 못했습니다. 값을 직접 골라 복사해 주세요.」</p>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 20px">
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">만들기 창</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">모달 400 · 처음 초점은 이름 칸 · 이름은 꼭</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 20px 12px; border-radius: 10px; background: rgba(16, 24, 28, 0.08)">
|
||||
<div role="dialog" aria-modal="true" aria-labelledby="ap-new-title" style="width: 100%; max-width: 400px; box-sizing: border-box; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14); display: flex; flex-direction: column; gap: 12px">
|
||||
<h3 id="ap-new-title" style="margin: 0; font-size: 15px; font-weight: 700">앱 비밀번호 만들기</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="ap-new-name" style="font-size: 12.5px; font-weight: 600; color: #4A5363">이름</label>
|
||||
<input id="ap-new-name" class="field" type="text" value="회사 PC 아웃룩" maxlength="50" placeholder="예: 회사 PC 아웃룩" aria-describedby="ap-new-name-help" style="height: 44px; padding: 0 12px">
|
||||
<p id="ap-new-name-help" style="margin: 0; font-size: 12.5px; color: #667085">어느 프로그램 · 기기에서 쓰는지 알아볼 이름입니다. 40자까지.</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">만들기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dl style="margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px"><dt style="color: #667085">이름이 비었을 때 (칸 아래)</dt><dd style="margin: 0; color: #B42318">이름을 넣어 주세요.</dd></div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px"><dt style="color: #667085">같은 이름이 있을 때 (칸 아래)</dt><dd style="margin: 0; color: #B42318">같은 이름의 앱 비밀번호가 있습니다.</dd></div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px"><dt style="color: #667085">그사이 다른 창에서 5개를 채웠을 때</dt><dd style="margin: 0; color: #B42318">5개까지 만들 수 있습니다. 쓰지 않는 앱 비밀번호를 지운 뒤 만들어 주세요.</dd></div>
|
||||
</dl>
|
||||
</section>
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">지우기 확인 창</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">모달 400 · 되돌릴 수 없는 일 — 처음 초점 「취소」</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 20px 12px; border-radius: 10px; background: rgba(16, 24, 28, 0.08)">
|
||||
<div role="alertdialog" aria-modal="true" aria-labelledby="ap-del-title" aria-describedby="ap-del-message" style="width: 100%; max-width: 400px; box-sizing: border-box; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14); display: flex; flex-direction: column; gap: 10px">
|
||||
<h3 id="ap-del-title" style="margin: 0; font-size: 15px; font-weight: 700">‘휴대폰 메일 앱’ 앱 비밀번호를 지울까요?</h3>
|
||||
<p id="ap-del-message" style="margin: 0; color: #4A5363">이 비밀번호로 연결한 메일 프로그램은 다음 연결부터 로그인하지 못합니다. 지운 비밀번호는 되돌릴 수 없습니다.</p>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="danger-solid" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; outline: 2px solid #0E7C86; outline-offset: 2px">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="status" style="display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; font-weight: 500">‘휴대폰 메일 앱’ 앱 비밀번호를 지웠습니다.</span>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">줄이 사라지고 개수가 줄어듭니다(되돌리기 없음). 이미 연결된 프로그램은 다음에 메일을 받거나 보낼 때 비밀번호를 다시 묻습니다.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">줄 · 값</h2>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>줄마다 이름 · 만든 날 · 마지막 사용 · [지우기]. 최근에 만든 것이 위입니다. 구현은 실제 표(table) — 캔버스만 grid 로 그렸습니다.</li>
|
||||
<li>마지막 사용 = 그 앱 비밀번호로 메일 서버에 로그인한 마지막 때(시각 · IMAP 또는 SMTP · IP). 쓰지 않았으면 「아직 쓰지 않음」(회색) — 오래 쓰지 않은 줄은 지워도 된다는 신호입니다.</li>
|
||||
<li>값은 메일 서버(엔진)가 만든 40자(app_ 로 시작). 만들 때 한 번만 보이고, 서버도 다시 보여 주지 못합니다.</li>
|
||||
<li>결과 창의 값은 4자씩 떨어뜨려 보이지만 띄어쓰기는 없습니다 — [복사]는 40자 그대로 복사합니다.</li>
|
||||
<li>[지우기] 36 — 차단한 주소의 [차단 풀기]와 같은 밀도 예외(새 토큰 없음). 긴 이름은 줄 안에서 말줄임.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">누르면</h2>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>[앱 비밀번호 만들기] → 이름 창 → [만들기] → 결과 창(값 · [복사] · 설정값) → [닫기] → 목록 맨 위에 새 줄, 「4 / 5개」.</li>
|
||||
<li>5개면 [만들기]는 창을 열지 않고 까닭을 읽어 줍니다(aria-disabled · role=status).</li>
|
||||
<li>[지우기] → 확인 창 → 줄이 사라지고 개수가 줄어듭니다.</li>
|
||||
<li>로그인 기록의 메일 프로그램 줄에 앱 비밀번호 이름이 함께 남습니다. 지운 앱 비밀번호의 기록도 그 이름 그대로 남습니다.</li>
|
||||
<li>2단계 인증 화면의 「켰습니다」 안내 · 경고의 링크가 이 화면으로 옵니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2810}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,501 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>설정 · 로그인 기록</title>
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
@font-face{font-family:'Pretendard';src:url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2-variations'),url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
|
||||
body{margin:0}
|
||||
a{color:#0E7C86}a:hover{color:#0A5F67}
|
||||
:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
|
||||
.primary{background:#0E7C86;color:#FFFFFF}
|
||||
.primary:hover{background:#0A5F67}
|
||||
.ghost{background:transparent;color:#4A5363}
|
||||
.ghost:hover{background:#F2F4F7;color:#171C26}
|
||||
.danger-solid{background:#B42318;color:#FFFFFF}
|
||||
.danger-solid:hover{background:#912018}
|
||||
.line-btn{background:#FFFFFF;color:#344054;border:1px solid #D0D5DD}
|
||||
.line-btn:hover{background:#F2F4F7}
|
||||
.line-danger{background:#FFFFFF;color:#B42318;border:1px solid #D0D5DD}
|
||||
.line-danger:hover{background:#FEF3F2}
|
||||
.menu-link{color:#344054}
|
||||
.menu-link:hover{background:#EEF0F3}
|
||||
.field{box-sizing:border-box;border:1px solid #D0D5DD;border-radius:8px;background:#FFFFFF;font:inherit;color:#171C26}
|
||||
.field:focus{outline:none;border-color:#0E7C86;box-shadow:0 0 0 1px #0E7C86}
|
||||
.field.is-error{border-color:#B42318}
|
||||
.pw-box:focus-within{border-color:#0E7C86 !important;box-shadow:0 0 0 1px #0E7C86}
|
||||
.pw-box.is-error{border-color:#B42318 !important}
|
||||
.pw-box.is-error:focus-within{box-shadow:0 0 0 1px #B42318}
|
||||
.pw-input{flex:1 1 auto;min-width:0;height:42px;border:0;outline:none;background:transparent;font:inherit;color:#171C26;padding:0 12px}
|
||||
.seg{background:transparent;color:#344054}
|
||||
.seg:hover{background:#F2F4F7}
|
||||
.ss-grid{display:grid;grid-template-columns:16px minmax(0,1fr) 112px 150px 84px;column-gap:12px;align-items:center}
|
||||
.lh-grid{display:grid;grid-template-columns:124px minmax(0,1fr) 112px 120px 142px;column-gap:12px;align-items:center}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 2300px; display: flex; flex-direction: column; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
|
||||
<div role="region" aria-label="화면 — 설정 › 로그인 기록" style="flex: 0 0 auto; height: 960px; box-sizing: border-box; display: flex; background: #FFFFFF; border-bottom: 1px solid #E6E8EC; overflow: hidden">
|
||||
|
||||
<nav aria-label="사내 시스템" style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
|
||||
<a href="Main.dc.html" style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px; border-radius: 10px; text-decoration: none">
|
||||
<img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
|
||||
</a>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px">
|
||||
<li>
|
||||
<a href="Main.dc.html" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
<span>메일</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
<span>캘린더</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span>파일</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
|
||||
<span>ERP</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Contacts.dc.html" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
||||
<span>주소록</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="Settings.dc.html" aria-current="page" style="margin-top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||
<span>설정</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
|
||||
<header style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC">
|
||||
<span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">설정</span>
|
||||
<div style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
<input type="search" aria-label="통합 검색" placeholder="통합 검색" style="flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; color: #171C26">
|
||||
</div>
|
||||
<div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 13px; font-weight: 600">김</span>
|
||||
<div style="display: flex; flex-direction: column; line-height: 1.3">
|
||||
<span style="font-weight: 600">김아라</span>
|
||||
<span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
|
||||
</div>
|
||||
<a href="Login.dc.html" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #4A5363; font-weight: 500; text-decoration: none">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
<span>로그아웃</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style="flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: stretch">
|
||||
|
||||
<nav aria-label="설정 메뉴" style="flex: 1 1 208px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
|
||||
<p style="margin: 4px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">계정</p>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<li><a href="SettingsAccount.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
||||
<span>비밀번호</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsTwoFactor.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><polyline points="9 12 11 14 15 10"></polyline></svg>
|
||||
<span>2단계 인증</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsAppPasswords.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
|
||||
<span>앱 비밀번호</span>
|
||||
</a></li>
|
||||
<li><a href="#" aria-current="page" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; background: #E3F2F3; color: #0A5F67; font-weight: 600; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg>
|
||||
<span>로그인 기록</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
<p style="margin: 14px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">메일</p>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<li><a href="Settings.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
||||
<span>서명</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsVacation.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><line x1="10" y1="14" x2="14" y2="18"></line><line x1="14" y1="14" x2="10" y2="18"></line></svg>
|
||||
<span>부재중 자동 응답</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsFilter.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
|
||||
<span>필터</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsSendRead.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
|
||||
<span>보내기 · 읽기</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsSendRead.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
|
||||
<span>차단한 주소</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsLargeFiles.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span>대용량 첨부</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsNotify.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
|
||||
<span>알림</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main style="flex: 999 1 560px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column">
|
||||
<div style="max-width: 800px; box-sizing: border-box; padding: 20px 32px 36px; display: flex; flex-direction: column; gap: 22px">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 4px">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">로그인 기록</h1>
|
||||
<p style="margin: 0; color: #4A5363">최근 90일 동안의 로그인입니다. 모르는 기록이 있으면 바로 <a href="SettingsAccount.dc.html">비밀번호를 바꾸고</a>, <a href="SettingsTwoFactor.dc.html">2단계 인증</a>이 꺼져 있으면 켜 주세요.</p>
|
||||
</div>
|
||||
|
||||
<section aria-label="로그인된 브라우저" style="display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 44px">
|
||||
<div style="flex: 1 1 auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">로그인된 브라우저</h2>
|
||||
<span style="font-size: 12.5px; color: #667085">웹메일 3곳</span>
|
||||
</div>
|
||||
<button type="button" class="line-btn" style="min-height: 44px; padding: 0 14px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">다른 곳 모두 로그아웃</button>
|
||||
</div>
|
||||
<div style="border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<div aria-hidden="true" class="ss-grid" style="height: 32px; box-sizing: border-box; padding: 0 8px 0 14px; background: #FBFBFC; border-bottom: 1px solid #E6E8EC; font-size: 12px; font-weight: 600; color: #667085">
|
||||
<span></span>
|
||||
<span>브라우저 · 운영체제</span>
|
||||
<span>IP</span>
|
||||
<span>마지막 활동</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<ul aria-label="로그인된 브라우저" style="list-style: none; margin: 0; padding: 0">
|
||||
<li class="ss-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">Chrome · Windows</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">211.186.95.252</span>
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #0A5F67">지금 이 브라우저</span>
|
||||
<span></span>
|
||||
</li>
|
||||
<li class="ss-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">Edge · Windows</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">211.186.95.252</span>
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums">오늘 오전 9:05</span>
|
||||
<button type="button" class="line-btn" aria-label="‘Edge · Windows’ 로그아웃" style="justify-self: end; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">로그아웃</button>
|
||||
</li>
|
||||
<li class="ss-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">Safari · iPhone</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">223.38.120.77</span>
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums">어제 오후 10:31</span>
|
||||
<button type="button" class="line-btn" aria-label="‘Safari · iPhone’ 로그아웃" style="justify-self: end; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">로그아웃</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">웹메일 로그인만 보입니다. 메일 프로그램은 <a href="SettingsAppPasswords.dc.html">앱 비밀번호</a>를 지워 끊습니다.</p>
|
||||
</section>
|
||||
|
||||
<section aria-label="최근 로그인" style="display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 44px">
|
||||
<div style="flex: 1 1 auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">최근 로그인</h2>
|
||||
<span style="font-size: 12.5px; color: #667085">최근 90일 · 웹메일과 메일 프로그램</span>
|
||||
</div>
|
||||
<div role="radiogroup" aria-label="보일 기록" style="display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #D0D5DD; border-radius: 8px">
|
||||
<button type="button" role="radio" aria-checked="true" style="min-height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: #E3F2F3; color: #0A5F67; font: inherit; font-weight: 600; cursor: pointer">전체</button>
|
||||
<button type="button" role="radio" aria-checked="false" class="seg" style="min-height: 36px; padding: 0 14px; border: 0; border-radius: 6px; font: inherit; font-weight: 500; cursor: pointer">실패만</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<div aria-hidden="true" class="lh-grid" style="height: 32px; box-sizing: border-box; padding: 0 8px 0 14px; background: #FBFBFC; border-bottom: 1px solid #E6E8EC; font-size: 12px; font-weight: 600; color: #667085">
|
||||
<span>시각</span>
|
||||
<span>방식</span>
|
||||
<span>IP</span>
|
||||
<span>기기</span>
|
||||
<span>결과</span>
|
||||
</div>
|
||||
<ul aria-label="최근 로그인" style="list-style: none; margin: 0; padding: 0">
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">오늘 오전 9:30</span>
|
||||
<span style="min-width: 0">웹메일</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">211.186.95.252</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #4A5363">Chrome · Windows</span>
|
||||
<span style="font-size: 12.5px; color: #344054">성공 · 2단계 인증</span>
|
||||
</li>
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">오늘 오전 9:29</span>
|
||||
<span style="min-width: 0">웹메일</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">211.186.95.252</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #4A5363">Chrome · Windows</span>
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #B42318">실패 — 코드 틀림</span>
|
||||
</li>
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">오늘 오전 9:12</span>
|
||||
<span style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span>메일 프로그램 · IMAP</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #667085">앱 비밀번호 ‘회사 PC 아웃룩’</span>
|
||||
</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">211.186.95.252</span>
|
||||
<span aria-label="알 수 없음" style="font-size: 12.5px; color: #98A2B3">—</span>
|
||||
<span style="font-size: 12.5px; color: #344054">성공</span>
|
||||
</li>
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">오늘 오전 8:47</span>
|
||||
<span style="min-width: 0">웹메일</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">211.186.95.252</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #4A5363">Edge · Windows</span>
|
||||
<span style="font-size: 12.5px; color: #344054">성공</span>
|
||||
</li>
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">어제 오후 11:58</span>
|
||||
<span style="min-width: 0">메일 프로그램 · SMTP</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">45.133.10.21</span>
|
||||
<span aria-label="알 수 없음" style="font-size: 12.5px; color: #98A2B3">—</span>
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #B42318">실패 — 비밀번호 틀림</span>
|
||||
</li>
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">어제 오후 10:05</span>
|
||||
<span style="min-width: 0">웹메일</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">223.38.120.77</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #4A5363">Safari · iPhone</span>
|
||||
<span style="font-size: 12.5px; color: #344054">성공</span>
|
||||
</li>
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">어제 오후 6:40</span>
|
||||
<span style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span>메일 프로그램 · SMTP</span>
|
||||
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #667085">앱 비밀번호 ‘휴대폰 메일 앱’</span>
|
||||
</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">223.38.120.77</span>
|
||||
<span aria-label="알 수 없음" style="font-size: 12.5px; color: #98A2B3">—</span>
|
||||
<span style="font-size: 12.5px; color: #344054">성공</span>
|
||||
</li>
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">10월 29일 오후 3:21</span>
|
||||
<span style="min-width: 0">웹메일</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">185.220.101.4</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #4A5363">Chrome · Linux</span>
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #B42318">실패 — 비밀번호 틀림</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: -10px">
|
||||
<button type="button" class="line-btn" style="min-height: 44px; padding: 0 16px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">더 보기</button>
|
||||
<span style="font-size: 12.5px; color: #667085">최근 순서 · 20개씩. 90일이 지난 기록은 지웁니다.</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="box-sizing: border-box; padding: 44px 48px 48px; display: flex; flex-direction: column; gap: 28px">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; max-width: 1060px">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">설정 · 로그인 기록</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">위 화면은 2단계 인증을 켠 직원의 기록입니다(2단계 인증 · 앱 비밀번호 보드와 같은 날). 웹메일과 메일 프로그램(IMAP · SMTP)의 로그인을 성공 · 실패 모두 보이고, 지금 로그인된 브라우저를 하나씩 또는 한꺼번에 끊습니다. 메뉴는 계정 묶음의 「로그인 기록」(맨 아래). 2026-10-31 확정.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 800px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="최근 로그인 — 실패만" style="display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px; overflow: hidden">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 32px; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">최근 로그인 — 실패만</h2>
|
||||
<span style="font-size: 12px; color: #667085">[실패만]을 고르면 실패한 줄만 · [더 보기]도 실패만 이어서 · 콘텐츠 열 800</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 22px; padding: 20px 32px 36px">
|
||||
<section aria-label="최근 로그인 — 실패만" style="display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 44px">
|
||||
<div style="flex: 1 1 auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">최근 로그인</h2>
|
||||
<span style="font-size: 12.5px; color: #667085">최근 90일 · 실패 4번</span>
|
||||
</div>
|
||||
<div role="radiogroup" aria-label="보일 기록" style="display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #D0D5DD; border-radius: 8px">
|
||||
<button type="button" role="radio" aria-checked="false" class="seg" style="min-height: 36px; padding: 0 14px; border: 0; border-radius: 6px; font: inherit; font-weight: 500; cursor: pointer">전체</button>
|
||||
<button type="button" role="radio" aria-checked="true" style="min-height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: #E3F2F3; color: #0A5F67; font: inherit; font-weight: 600; cursor: pointer">실패만</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<div aria-hidden="true" class="lh-grid" style="height: 32px; box-sizing: border-box; padding: 0 8px 0 14px; background: #FBFBFC; border-bottom: 1px solid #E6E8EC; font-size: 12px; font-weight: 600; color: #667085">
|
||||
<span>시각</span>
|
||||
<span>방식</span>
|
||||
<span>IP</span>
|
||||
<span>기기</span>
|
||||
<span>결과</span>
|
||||
</div>
|
||||
<ul aria-label="최근 로그인 — 실패만" style="list-style: none; margin: 0; padding: 0">
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">오늘 오전 9:29</span>
|
||||
<span style="min-width: 0">웹메일</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">211.186.95.252</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #4A5363">Chrome · Windows</span>
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #B42318">실패 — 코드 틀림</span>
|
||||
</li>
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">어제 오후 11:58</span>
|
||||
<span style="min-width: 0">메일 프로그램 · SMTP</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">45.133.10.21</span>
|
||||
<span aria-label="알 수 없음" style="font-size: 12.5px; color: #98A2B3">—</span>
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #B42318">실패 — 비밀번호 틀림</span>
|
||||
</li>
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px; border-bottom: 1px solid #EEF0F3">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">10월 29일 오후 3:21</span>
|
||||
<span style="min-width: 0">웹메일</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">185.220.101.4</span>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #4A5363">Chrome · Linux</span>
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #B42318">실패 — 비밀번호 틀림</span>
|
||||
</li>
|
||||
<li class="lh-grid" style="min-height: 44px; box-sizing: border-box; padding: 4px 8px 4px 14px">
|
||||
<span style="font-size: 12.5px; color: #344054; font-variant-numeric: tabular-nums; white-space: nowrap">10월 12일 오전 4:02</span>
|
||||
<span style="min-width: 0">메일 프로그램 · IMAP</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">91.240.118.30</span>
|
||||
<span aria-label="알 수 없음" style="font-size: 12.5px; color: #98A2B3">—</span>
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #B42318">실패 — 비밀번호 틀림</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">다른 곳 모두 로그아웃 — 확인 창</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">모달 400 · 되돌릴 수 없는 일 — 처음 초점 「취소」</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 20px 12px; border-radius: 10px; background: rgba(16, 24, 28, 0.08)">
|
||||
<div role="alertdialog" aria-modal="true" aria-labelledby="lh-out-title" aria-describedby="lh-out-message" style="width: 100%; max-width: 400px; box-sizing: border-box; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14); display: flex; flex-direction: column; gap: 10px">
|
||||
<h3 id="lh-out-title" style="margin: 0; font-size: 15px; font-weight: 700">다른 곳의 로그인을 모두 끊을까요?</h3>
|
||||
<p id="lh-out-message" style="margin: 0; color: #4A5363">이 브라우저를 뺀 2곳(Edge · Windows, Safari · iPhone)의 웹메일 로그인을 끊습니다. 끊긴 곳은 다음 동작에서 바로 로그인 화면으로 돌아갑니다.</p>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">메일 프로그램은 끊기지 않습니다 — 앱 비밀번호를 지워 끊어 주세요.</p>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">모두 로그아웃</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; outline: 2px solid #0E7C86; outline-offset: 2px">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="status" style="display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; font-weight: 500">다른 곳의 로그인 2곳을 끊었습니다.</span>
|
||||
</div>
|
||||
<div role="status" style="display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; font-weight: 500">‘Edge · Windows’의 로그인을 끊었습니다.</span>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">위 알림은 확인 창 뒤, 아래 알림은 줄의 [로그아웃] 뒤입니다(묻지 않고 바로 끊음 · 되돌리기 없음). 끊은 줄은 목록에서 빠지고, 다른 곳이 없으면 [다른 곳 모두 로그아웃]을 그리지 않습니다.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 800px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="빈 상태" style="display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px; overflow: hidden">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 32px; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">빈 상태</h2>
|
||||
<span style="font-size: 12px; color: #667085">다른 곳의 로그인이 없고, 실패한 로그인도 없을 때 · 콘텐츠 열 800</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 22px; padding: 20px 32px 36px">
|
||||
<section aria-label="로그인된 브라우저" style="display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 44px">
|
||||
<div style="flex: 1 1 auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">로그인된 브라우저</h2>
|
||||
<span style="font-size: 12.5px; color: #667085">웹메일 1곳</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<div aria-hidden="true" class="ss-grid" style="height: 32px; box-sizing: border-box; padding: 0 8px 0 14px; background: #FBFBFC; border-bottom: 1px solid #E6E8EC; font-size: 12px; font-weight: 600; color: #667085">
|
||||
<span></span>
|
||||
<span>브라우저 · 운영체제</span>
|
||||
<span>IP</span>
|
||||
<span>마지막 활동</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<ul aria-label="로그인된 브라우저" style="list-style: none; margin: 0; padding: 0">
|
||||
<li class="ss-grid" style="min-height: 44px; box-sizing: border-box; padding: 0 8px 0 14px">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">Chrome · Windows</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363; font-variant-numeric: tabular-nums">211.186.95.252</span>
|
||||
<span style="font-size: 12.5px; font-weight: 600; color: #0A5F67">지금 이 브라우저</span>
|
||||
<span></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">다른 곳에 로그인된 브라우저가 없습니다. 웹메일 로그인만 보입니다. 메일 프로그램은 <a href="SettingsAppPasswords.dc.html">앱 비밀번호</a>를 지워 끊습니다.</p>
|
||||
</section>
|
||||
|
||||
<section aria-label="최근 로그인 — 실패만" style="display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 44px">
|
||||
<div style="flex: 1 1 auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">최근 로그인</h2>
|
||||
<span style="font-size: 12.5px; color: #667085">최근 90일 · 웹메일과 메일 프로그램</span>
|
||||
</div>
|
||||
<div role="radiogroup" aria-label="보일 기록" style="display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #D0D5DD; border-radius: 8px">
|
||||
<button type="button" role="radio" aria-checked="false" class="seg" style="min-height: 36px; padding: 0 14px; border: 0; border-radius: 6px; font: inherit; font-weight: 500; cursor: pointer">전체</button>
|
||||
<button type="button" role="radio" aria-checked="true" style="min-height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: #E3F2F3; color: #0A5F67; font: inherit; font-weight: 600; cursor: pointer">실패만</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 1px solid #EEF0F3; border-radius: 10px; background: #FBFBFC; text-align: center">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><polyline points="9 12 11 14 15 10"></polyline></svg>
|
||||
<p style="margin: 4px 0 0; font-weight: 600">최근 90일 동안 실패한 로그인이 없습니다</p>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">[전체]를 누르면 성공한 로그인도 봅니다.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 20px">
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">줄 · 값</h2>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>로그인된 브라우저 — 웹메일 로그인(세션)마다 한 줄: PC · 휴대폰 아이콘 · 브라우저 · 운영체제 · IP · 마지막 활동 · [로그아웃]. 맨 위는 지금 이 브라우저 — 단추 대신 「지금 이 브라우저」 글자만.</li>
|
||||
<li>브라우저 · 운영체제는 로그인할 때 브라우저가 알려 준 값으로 짐작합니다(틀릴 수 있음). 마지막 활동은 그 브라우저가 로그인을 마지막으로 이어 간 때입니다.</li>
|
||||
<li>최근 로그인 — 최근 순서. 메일 프로그램 줄은 기기를 알 수 없어 「—」, 대신 방식 아래에 앱 비밀번호 이름(맞는 앱 비밀번호가 없던 실패는 이름 없이).</li>
|
||||
<li>결과 글: 성공 · 성공 · 2단계 인증 · 실패 — 비밀번호 틀림 · 실패 — 코드 틀림 · 실패 — 앱 비밀번호 필요(2단계 인증을 켠 계정에 메일 프로그램이 웹메일 비밀번호로 연결하려 함). 실패는 빨간 굵은 글자만 — 뱃지 없음.</li>
|
||||
<li>IP 는 앞단 프록시를 지난 실제 주소입니다. 나라 · 지역은 보이지 않습니다. 구현은 실제 표(table) — 캔버스만 grid 로 그렸습니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">알아 둘 것</h2>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>줄의 [로그아웃]은 36 — 차단한 주소의 [차단 풀기]와 같은 밀도 예외(새 토큰 없음). [다른 곳 모두 로그아웃] · [더 보기]는 44.</li>
|
||||
<li>끊은 브라우저는 바로 막힙니다 — 다음 요청에서 로그인 화면으로 가고, 열린 실시간 알림 연결도 30초 안에 끊깁니다.</li>
|
||||
<li>비밀번호를 바꾸면 지금처럼 다른 곳의 로그인을 모두 끊습니다 — 이 목록에도 이 브라우저만 남습니다.</li>
|
||||
<li>목록을 받지 못하면 지금의 목록 오류와 같은 모양(사전 문구 + [다시 시도]).</li>
|
||||
<li>기록은 이 기능을 배포한 날부터 쌓입니다 — 그 전 로그인은 보이지 않습니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2300}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,493 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>설정 · 2단계 인증</title>
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<style>
|
||||
@font-face{font-family:'Pretendard';src:url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2-variations'),url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
|
||||
body{margin:0}
|
||||
a{color:#0E7C86}a:hover{color:#0A5F67}
|
||||
:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
|
||||
.primary{background:#0E7C86;color:#FFFFFF}
|
||||
.primary:hover{background:#0A5F67}
|
||||
.ghost{background:transparent;color:#4A5363}
|
||||
.ghost:hover{background:#F2F4F7;color:#171C26}
|
||||
.danger-solid{background:#B42318;color:#FFFFFF}
|
||||
.danger-solid:hover{background:#912018}
|
||||
.line-btn{background:#FFFFFF;color:#344054;border:1px solid #D0D5DD}
|
||||
.line-btn:hover{background:#F2F4F7}
|
||||
.line-danger{background:#FFFFFF;color:#B42318;border:1px solid #D0D5DD}
|
||||
.line-danger:hover{background:#FEF3F2}
|
||||
.menu-link{color:#344054}
|
||||
.menu-link:hover{background:#EEF0F3}
|
||||
.field{box-sizing:border-box;border:1px solid #D0D5DD;border-radius:8px;background:#FFFFFF;font:inherit;color:#171C26}
|
||||
.field:focus{outline:none;border-color:#0E7C86;box-shadow:0 0 0 1px #0E7C86}
|
||||
.field.is-error{border-color:#B42318}
|
||||
.pw-box:focus-within{border-color:#0E7C86 !important;box-shadow:0 0 0 1px #0E7C86}
|
||||
.pw-box.is-error{border-color:#B42318 !important}
|
||||
.pw-box.is-error:focus-within{box-shadow:0 0 0 1px #B42318}
|
||||
.pw-input{flex:1 1 auto;min-width:0;height:42px;border:0;outline:none;background:transparent;font:inherit;color:#171C26;padding:0 12px}
|
||||
.seg{background:transparent;color:#344054}
|
||||
.seg:hover{background:#F2F4F7}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 3130px; display: flex; flex-direction: column; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
|
||||
<div role="region" aria-label="화면 — 설정 › 2단계 인증 (꺼진 상태)" style="flex: 0 0 auto; height: 900px; box-sizing: border-box; display: flex; background: #FFFFFF; border-bottom: 1px solid #E6E8EC; overflow: hidden">
|
||||
|
||||
<nav aria-label="사내 시스템" style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
|
||||
<a href="Main.dc.html" style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px; border-radius: 10px; text-decoration: none">
|
||||
<img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
|
||||
</a>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px">
|
||||
<li>
|
||||
<a href="Main.dc.html" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
<span>메일</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
|
||||
<span>캘린더</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
||||
<span>파일</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
|
||||
<span>ERP</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Contacts.dc.html" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
||||
<span>주소록</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="Settings.dc.html" aria-current="page" style="margin-top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600; text-decoration: none">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||
<span>설정</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
|
||||
|
||||
<header style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC">
|
||||
<span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">설정</span>
|
||||
<div style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
<input type="search" aria-label="통합 검색" placeholder="통합 검색" style="flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; color: #171C26">
|
||||
</div>
|
||||
<div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
|
||||
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 13px; font-weight: 600">김</span>
|
||||
<div style="display: flex; flex-direction: column; line-height: 1.3">
|
||||
<span style="font-weight: 600">김아라</span>
|
||||
<span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
|
||||
</div>
|
||||
<a href="Login.dc.html" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #4A5363; font-weight: 500; text-decoration: none">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
||||
<span>로그아웃</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style="flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: stretch">
|
||||
|
||||
<nav aria-label="설정 메뉴" style="flex: 1 1 208px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
|
||||
<p style="margin: 4px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">계정</p>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<li><a href="SettingsAccount.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
||||
<span>비밀번호</span>
|
||||
</a></li>
|
||||
<li><a href="#" aria-current="page" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; background: #E3F2F3; color: #0A5F67; font-weight: 600; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><polyline points="9 12 11 14 15 10"></polyline></svg>
|
||||
<span>2단계 인증</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsAppPasswords.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
|
||||
<span>앱 비밀번호</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsLoginHistory.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg>
|
||||
<span>로그인 기록</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
<p style="margin: 14px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">메일</p>
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<li><a href="Settings.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
||||
<span>서명</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsVacation.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><line x1="10" y1="14" x2="14" y2="18"></line><line x1="14" y1="14" x2="10" y2="18"></line></svg>
|
||||
<span>부재중 자동 응답</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsFilter.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
|
||||
<span>필터</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsSendRead.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
|
||||
<span>보내기 · 읽기</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsSendRead.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
|
||||
<span>차단한 주소</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsLargeFiles.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
|
||||
<span>대용량 첨부</span>
|
||||
</a></li>
|
||||
<li><a href="SettingsNotify.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
|
||||
<span>알림</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main style="flex: 999 1 560px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column">
|
||||
<div style="max-width: 800px; box-sizing: border-box; padding: 20px 32px 36px; display: flex; flex-direction: column; gap: 22px">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 4px">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">2단계 인증</h1>
|
||||
<p style="margin: 0; color: #4A5363">로그인할 때 비밀번호와 함께 휴대폰 인증 앱의 코드를 확인합니다. 비밀번호가 새어 나가도 휴대폰이 없으면 로그인할 수 없습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 700px; box-sizing: border-box; padding: 16px 18px; border: 1px solid #E6E8EC; border-radius: 10px">
|
||||
<div style="flex: 1 1 300px; display: flex; flex-direction: column; gap: 2px">
|
||||
<span style="font-size: 14px; font-weight: 700; color: #4A5363">꺼짐</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363">지금은 로그인할 때 비밀번호만 확인합니다.</span>
|
||||
</div>
|
||||
<button type="button" class="primary" style="display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><polyline points="9 12 11 14 15 10"></polyline></svg>
|
||||
<span>2단계 인증 켜기</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; max-width: 700px; box-sizing: border-box; padding: 12px 14px; border-radius: 8px; background: #FFF7E6; color: #7A5200">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<div style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px">
|
||||
<span style="font-weight: 600">켜면 메일 프로그램은 앱 비밀번호로 다시 연결해야 합니다</span>
|
||||
<span>Outlook · 썬더버드 · 휴대폰 메일 앱은 웹메일 비밀번호로 새로 연결할 수 없고, 이미 연결해 둔 프로그램도 다음에 다시 연결할 때 막힙니다. 켜기 전에 <a href="SettingsAppPasswords.dc.html">앱 비밀번호</a>를 만들어 두면 편합니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby="tf-steps-title" style="display: flex; flex-direction: column; gap: 10px">
|
||||
<h2 id="tf-steps-title" style="margin: 0; font-size: 14px; font-weight: 700">켜는 차례</h2>
|
||||
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 700px">
|
||||
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px">
|
||||
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">1</span>
|
||||
<span>휴대폰에 인증 앱을 설치합니다 — Google Authenticator, Microsoft Authenticator 처럼 6자리 코드를 만드는(TOTP) 앱이면 됩니다.</span>
|
||||
</li>
|
||||
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px">
|
||||
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">2</span>
|
||||
<span>[2단계 인증 켜기]를 누르고 화면의 QR 코드를 인증 앱으로 찍습니다.</span>
|
||||
</li>
|
||||
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px">
|
||||
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">3</span>
|
||||
<span>앱에 표시된 6자리 코드와 지금 비밀번호를 넣으면 켜집니다. 그다음부터 로그인할 때마다 코드를 묻습니다.</span>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="box-sizing: border-box; padding: 44px 48px 48px; display: flex; flex-direction: column; gap: 28px">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; max-width: 1060px">
|
||||
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">설정 · 2단계 인증</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">위 화면은 꺼진 상태입니다. 인증 앱(TOTP) 하나로만 켭니다 — 이 브라우저 기억 · 복구 코드 · 문자 · 메일 코드는 없고, 휴대폰을 잃으면 관리자에게 문의합니다. 메뉴는 계정 묶음의 「2단계 인증」(비밀번호 아래). 2026-10-31 확정.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 684px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">켜기 창</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">모달 620(필터 고치기 창과 같은 폭) · 처음 초점은 코드 칸</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 20px 12px; border-radius: 10px; background: rgba(16, 24, 28, 0.08)">
|
||||
<div role="dialog" aria-modal="true" aria-labelledby="tf-on-title" style="width: 100%; max-width: 620px; box-sizing: border-box; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14); display: flex; flex-direction: column; gap: 16px">
|
||||
<h3 id="tf-on-title" style="margin: 0; font-size: 15px; font-weight: 700">2단계 인증 켜기</h3>
|
||||
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px">
|
||||
<li style="display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px">
|
||||
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">1</span>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px">
|
||||
<span style="font-weight: 600">인증 앱으로 QR 코드를 찍어 주세요</span>
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px">
|
||||
<div style="flex: 0 0 auto; padding: 6px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FFFFFF">
|
||||
<svg role="img" aria-label="인증 앱에 등록할 QR 코드" width="128" height="128" viewBox="0 0 29 29" shape-rendering="crispEdges" style="display: block"><path fill="#171C26" d="M2 2h7v1h-7zM11 2h2v1h-2zM16 2h2v1h-2zM20 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM10 3h2v1h-2zM13 3h1v1h-1zM20 3h1v1h-1zM26 3h1v1h-1zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM13 4h2v1h-2zM17 4h1v1h-1zM20 4h1v1h-1zM22 4h3v1h-3zM26 4h1v1h-1zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h1v1h-1zM10 5h1v1h-1zM12 5h1v1h-1zM15 5h2v1h-2zM20 5h1v1h-1zM22 5h3v1h-3zM26 5h1v1h-1zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h1v1h-1zM10 6h2v1h-2zM17 6h1v1h-1zM20 6h1v1h-1zM22 6h3v1h-3zM26 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM12 7h3v1h-3zM16 7h2v1h-2zM20 7h1v1h-1zM26 7h1v1h-1zM2 8h7v1h-7zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h7v1h-7zM14 9h2v1h-2zM18 9h1v1h-1zM6 10h1v1h-1zM8 10h1v1h-1zM11 10h1v1h-1zM13 10h1v1h-1zM15 10h1v1h-1zM19 10h4v1h-4zM24 10h2v1h-2zM2 11h2v1h-2zM5 11h1v1h-1zM11 11h1v1h-1zM13 11h2v1h-2zM18 11h4v1h-4zM24 11h1v1h-1zM26 11h1v1h-1zM4 12h1v1h-1zM7 12h3v1h-3zM12 12h1v1h-1zM14 12h1v1h-1zM16 12h1v1h-1zM22 12h4v1h-4zM4 13h4v1h-4zM9 13h1v1h-1zM13 13h2v1h-2zM16 13h1v1h-1zM18 13h2v1h-2zM21 13h1v1h-1zM23 13h2v1h-2zM26 13h1v1h-1zM2 14h5v1h-5zM8 14h1v1h-1zM12 14h2v1h-2zM16 14h7v1h-7zM24 14h1v1h-1zM26 14h1v1h-1zM3 15h2v1h-2zM6 15h1v1h-1zM9 15h1v1h-1zM11 15h1v1h-1zM13 15h1v1h-1zM15 15h1v1h-1zM19 15h2v1h-2zM25 15h2v1h-2zM6 16h3v1h-3zM16 16h2v1h-2zM20 16h2v1h-2zM25 16h1v1h-1zM2 17h2v1h-2zM6 17h2v1h-2zM11 17h2v1h-2zM14 17h2v1h-2zM19 17h2v1h-2zM22 17h1v1h-1zM24 17h1v1h-1zM26 17h1v1h-1zM2 18h1v1h-1zM4 18h2v1h-2zM7 18h3v1h-3zM11 18h1v1h-1zM13 18h3v1h-3zM17 18h7v1h-7zM25 18h1v1h-1zM10 19h1v1h-1zM12 19h1v1h-1zM14 19h5v1h-5zM22 19h5v1h-5zM2 20h7v1h-7zM10 20h1v1h-1zM14 20h1v1h-1zM18 20h1v1h-1zM20 20h1v1h-1zM22 20h3v1h-3zM2 21h1v1h-1zM8 21h1v1h-1zM10 21h4v1h-4zM15 21h1v1h-1zM17 21h2v1h-2zM22 21h1v1h-1zM24 21h3v1h-3zM2 22h1v1h-1zM4 22h3v1h-3zM8 22h1v1h-1zM11 22h1v1h-1zM13 22h1v1h-1zM15 22h1v1h-1zM17 22h9v1h-9zM2 23h1v1h-1zM4 23h3v1h-3zM8 23h1v1h-1zM11 23h2v1h-2zM15 23h1v1h-1zM17 23h1v1h-1zM19 23h1v1h-1zM22 23h2v1h-2zM25 23h1v1h-1zM2 24h1v1h-1zM4 24h3v1h-3zM8 24h1v1h-1zM10 24h3v1h-3zM17 24h1v1h-1zM19 24h2v1h-2zM22 24h4v1h-4zM2 25h1v1h-1zM8 25h1v1h-1zM11 25h1v1h-1zM13 25h1v1h-1zM15 25h1v1h-1zM17 25h2v1h-2zM22 25h2v1h-2zM25 25h2v1h-2zM2 26h7v1h-7zM12 26h1v1h-1zM15 26h3v1h-3zM22 26h1v1h-1zM24 26h1v1h-1zM26 26h1v1h-1z"></path></svg>
|
||||
</div>
|
||||
<div style="flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<p style="margin: 0; color: #4A5363">인증 앱에서 [+] → 「QR 코드 스캔」을 고르고 이 그림을 찍습니다.</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid #EEF0F3">
|
||||
<span id="tf-key-label" style="font-size: 12.5px; font-weight: 600; color: #4A5363">찍을 수 없으면 이 키를 입력하세요</span>
|
||||
<div style="display: flex; align-items: center; gap: 8px">
|
||||
<code aria-labelledby="tf-key-label" style="flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 7px 10px; border: 1px solid #E6E8EC; border-radius: 6px; background: #F8F9FB; font-family: Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 13px; line-height: 1.6; color: #171C26">K7QF 2M4X HB6R TZ3N PW5C YL7D JQ2V MGAS</code>
|
||||
<button type="button" class="line-btn" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
<span>복사</span>
|
||||
</button>
|
||||
</div>
|
||||
<span style="font-size: 12px; color: #667085">앱에는 「ARA SYSTEM (ara.kim@arasystem.it.kr)」로 저장됩니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li style="display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px">
|
||||
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">2</span>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="tf-on-code" style="font-weight: 600">앱에 표시된 6자리 코드</label>
|
||||
<input id="tf-on-code" class="field" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" value="482913" style="width: 200px; max-width: 100%; height: 44px; padding: 0 12px; font-size: 16px; letter-spacing: 0.24em; font-variant-numeric: tabular-nums">
|
||||
</div>
|
||||
</li>
|
||||
<li style="display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px">
|
||||
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">3</span>
|
||||
<div style="max-width: 320px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="tf-on-pw" style="font-weight: 600">지금 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="tf-on-pw" class="pw-input" type="password" autocomplete="current-password" value="•••••••••••••">
|
||||
<button type="button" class="ghost" aria-label="지금 비밀번호 보기" aria-pressed="false" style="flex: 0 0 auto; width: 44px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0 7px 7px 0; cursor: pointer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">켜기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 20px">
|
||||
<section style="display: flex; flex-direction: column; gap: 14px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">칸 아래 오류</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">[켜기]를 누른 뒤 — 알림 없이 칸 아래에만, 첫 잘못된 칸에 초점</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="tf-err-code" style="font-weight: 600">앱에 표시된 6자리 코드</label>
|
||||
<input id="tf-err-code" class="field is-error" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" value="" aria-invalid="true" aria-describedby="tf-err-code-error" style="width: 200px; max-width: 100%; height: 44px; padding: 0 12px; font-size: 16px; letter-spacing: 0.24em; font-variant-numeric: tabular-nums">
|
||||
<p id="tf-err-code-error" style="margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: #B42318">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span>코드가 올바르지 않습니다. 휴대폰의 날짜와 시간이 「자동」으로 맞춰져 있는지 확인해 주세요.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div style="max-width: 320px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="tf-err-pw" style="font-weight: 600">지금 비밀번호</label>
|
||||
<div class="pw-box is-error" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #B42318; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="tf-err-pw" class="pw-input" type="password" autocomplete="current-password" value="•••••••••••••" aria-invalid="true" aria-describedby="tf-err-pw-error">
|
||||
<button type="button" class="ghost" aria-label="지금 비밀번호 보기" aria-pressed="false" style="flex: 0 0 auto; width: 44px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0 7px 7px 0; cursor: pointer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
||||
</button>
|
||||
</div>
|
||||
<p id="tf-err-pw-error" style="margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: #B42318">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span>지금 비밀번호가 올바르지 않습니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">틀린 코드는 지우고 그 칸에 초점을 둡니다. 둘 다 틀렸으면 코드부터 알립니다. 틀려도 QR · 키는 그대로라 다시 찍지 않아도 됩니다. 비밀번호 틀림은 로그인 실패와 함께, 코드 틀림은 코드 실패로 따로 셉니다(로그인과 같은 한도) — 너무 많으면 「요청이 너무 많습니다…」 알림.</p>
|
||||
</section>
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">켜는 동안 · 창을 닫으면</h2>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #EEF0F3; border-radius: 10px">
|
||||
<span style="margin-right: auto; font-size: 12px; color: #667085">켜기 창 아래 단추 줄</span>
|
||||
<button type="button" disabled aria-busy="true" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font: inherit; font-weight: 600; opacity: 0.7; cursor: progress">켜는 중…</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>[켜기]는 코드와 지금 비밀번호를 함께 확인합니다. 맞으면 창을 닫고 화면이 「켜짐」으로 바뀝니다(아래 왼쪽 — 위에 안내 상자).</li>
|
||||
<li>키는 창을 열 때마다 새로 만듭니다. 켜지 않고 닫으면 그 키는 버립니다 — 앱에 먼저 저장한 항목은 지워 주세요.</li>
|
||||
<li>켜도 다른 곳의 웹메일 로그인은 끊지 않습니다 — 끊으려면 로그인 기록에서.</li>
|
||||
<li>QR · 키는 이 창에만 보이고 로그에 남기지 않습니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 800px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="켜진 상태 — 켠 직후" style="display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px; overflow: hidden">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 32px; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">켜진 상태 — 켠 직후</h2>
|
||||
<span style="font-size: 12px; color: #667085">콘텐츠 열 800 · 위 안내 상자는 켠 직후에만 보이고 이 화면을 떠나면 사라집니다</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 22px; padding: 20px 32px 36px">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">2단계 인증</h1>
|
||||
<p style="margin: 0; color: #4A5363">로그인할 때 비밀번호와 함께 휴대폰 인증 앱의 코드를 확인합니다. 비밀번호가 새어 나가도 휴대폰이 없으면 로그인할 수 없습니다.</p>
|
||||
</div>
|
||||
|
||||
<div role="status" style="display: flex; align-items: flex-start; gap: 10px; max-width: 700px; box-sizing: border-box; padding: 12px 14px; border-radius: 8px; background: #F3F8F8; color: #344054">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#067647" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<div style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<span style="font-weight: 600; color: #067647">2단계 인증을 켰습니다</span>
|
||||
<span>메일 프로그램(Outlook · 썬더버드 · 휴대폰 메일 앱)은 다시 연결할 때 앱 비밀번호가 필요합니다.</span>
|
||||
</div>
|
||||
<a href="SettingsAppPasswords.dc.html" class="line-btn" style="align-self: flex-start; display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box; padding: 0 12px; border-radius: 6px; font-weight: 600; text-decoration: none">앱 비밀번호 만들기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 700px; box-sizing: border-box; padding: 16px 18px; border: 1px solid #E6E8EC; border-radius: 10px">
|
||||
<div style="flex: 1 1 300px; display: flex; flex-direction: column; gap: 2px">
|
||||
<span style="font-size: 14px; font-weight: 700; color: #067647">켜짐 — 2026년 10월 31일부터</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363">로그인할 때마다 비밀번호와 인증 앱의 코드를 확인합니다.</span>
|
||||
</div>
|
||||
<button type="button" class="line-danger" style="min-height: 44px; padding: 0 16px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">2단계 인증 끄기</button>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; max-width: 700px; padding: 14px 16px; border-radius: 10px; background: #F3F8F8; color: #344054">
|
||||
<p style="margin: 0; display: flex; gap: 8px"><span aria-hidden="true">·</span><span>휴대폰을 바꿀 때는 2단계 인증을 끈 뒤 새 휴대폰으로 다시 켜 주세요 — 끌 때 지금 휴대폰의 코드가 필요합니다.</span></p>
|
||||
<p style="margin: 0; display: flex; gap: 8px"><span aria-hidden="true">·</span><span>휴대폰을 잃어버렸거나 인증 앱을 지웠으면 관리자에게 문의해 주세요.</span></p>
|
||||
<p style="margin: 0; display: flex; gap: 8px"><span aria-hidden="true">·</span><span>메일 프로그램은 <a href="SettingsAppPasswords.dc.html">앱 비밀번호</a>로 연결합니다.</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">끄기 창</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">모달 400 · 처음 초점 「취소」(Esc 도 같음)</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 20px 12px; border-radius: 10px; background: rgba(16, 24, 28, 0.08)">
|
||||
<div role="alertdialog" aria-modal="true" aria-labelledby="tf-off-title" aria-describedby="tf-off-message" style="width: 100%; max-width: 400px; box-sizing: border-box; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14); display: flex; flex-direction: column; gap: 12px">
|
||||
<h3 id="tf-off-title" style="margin: 0; font-size: 15px; font-weight: 700">2단계 인증을 끌까요?</h3>
|
||||
<p id="tf-off-message" style="margin: 0; color: #4A5363">끄면 비밀번호만으로 로그인합니다. 만들어 둔 앱 비밀번호는 그대로 남습니다.</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="tf-off-pw" style="font-size: 12.5px; font-weight: 600; color: #4A5363">지금 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="tf-off-pw" class="pw-input" type="password" autocomplete="current-password" value="•••••••••••••">
|
||||
<button type="button" class="ghost" aria-label="지금 비밀번호 보기" aria-pressed="false" style="flex: 0 0 auto; width: 44px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0 7px 7px 0; cursor: pointer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="tf-off-code" style="font-size: 12.5px; font-weight: 600; color: #4A5363">인증 앱 코드</label>
|
||||
<input id="tf-off-code" class="field" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" value="" style="width: 200px; max-width: 100%; height: 44px; padding: 0 12px; font-size: 16px; letter-spacing: 0.24em; font-variant-numeric: tabular-nums">
|
||||
</div>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
|
||||
<button type="button" class="danger-solid" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">끄기</button>
|
||||
<button type="button" class="ghost" style="min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; outline: 2px solid #0E7C86; outline-offset: 2px">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="status" style="display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span style="flex: 1 1 auto; font-weight: 500">2단계 인증을 껐습니다.</span>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">틀리면 켜기 창과 같은 칸 아래 글입니다. 끄면 화면은 「꺼짐」(위 화면)으로 돌아가고, 메일 프로그램은 웹메일 비밀번호로도 다시 연결할 수 있습니다.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 800px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<section aria-label="비밀번호 — 2단계 인증을 켠 직원" style="display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px; overflow: hidden">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 32px; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">비밀번호 — 2단계 인증을 켠 직원</h2>
|
||||
<span style="font-size: 12px; color: #667085">지금 양식(설정 · 비밀번호)에 「인증 앱 코드」 칸을 맨 아래 더합니다 · 콘텐츠 열 800</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 22px; padding: 20px 32px 36px">
|
||||
<div style="display: flex; flex-direction: column; gap: 4px">
|
||||
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">비밀번호</h1>
|
||||
<p style="margin: 0; color: #4A5363">웹메일에 로그인하는 비밀번호입니다. 2단계 인증이 켜져 있어 메일 프로그램은 앱 비밀번호로 연결합니다.</p>
|
||||
</div>
|
||||
|
||||
<form style="display: flex; flex-direction: column; gap: 18px; max-width: 420px; margin: 0">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pw2-current" style="font-weight: 600">지금 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pw2-current" class="pw-input" type="password" autocomplete="current-password" value="•••••••••••••">
|
||||
<button type="button" class="ghost" aria-label="지금 비밀번호 보기" aria-pressed="false" style="flex: 0 0 auto; width: 44px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0 7px 7px 0; cursor: pointer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pw2-new" style="font-weight: 600">새 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pw2-new" class="pw-input" type="password" autocomplete="new-password" value="•••••••••••••" aria-describedby="pw2-new-hint">
|
||||
<button type="button" class="ghost" aria-label="새 비밀번호 보기" aria-pressed="false" style="flex: 0 0 auto; width: 44px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0 7px 7px 0; cursor: pointer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
||||
</button>
|
||||
</div>
|
||||
<p id="pw2-new-hint" style="margin: 0; font-size: 12.5px; color: #667085">8자 이상 · 지금 비밀번호와 달라야 합니다. 영문 · 숫자 · 기호를 섞으면 더 안전합니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pw2-confirm" style="font-weight: 600">새 비밀번호 확인</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pw2-confirm" class="pw-input" type="password" autocomplete="new-password" value="•••••••••••••">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pw2-code" style="font-weight: 600">인증 앱 코드</label>
|
||||
<input id="pw2-code" class="field" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" value="" aria-describedby="pw2-code-hint" style="width: 200px; max-width: 100%; height: 44px; padding: 0 12px; font-size: 16px; letter-spacing: 0.24em; font-variant-numeric: tabular-nums">
|
||||
<p id="pw2-code-hint" style="margin: 0; font-size: 12.5px; color: #667085">코드는 30초마다 바뀝니다 — 다른 칸을 다 쓴 뒤 넣어 주세요.</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 12px">
|
||||
<button type="button" class="primary" style="display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer">비밀번호 바꾸기</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; max-width: 620px; padding: 12px 14px; border-radius: 8px; background: #F3F8F8; color: #344054">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<span>바꾸면 이 브라우저를 뺀 다른 기기 · 브라우저의 웹메일 로그인이 끊깁니다.</span>
|
||||
<span>앱 비밀번호도 모두 지워집니다 — 메일 프로그램은 새 앱 비밀번호로 다시 연결해 주세요.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 style="margin: 0; font-size: 14px; font-weight: 700">정한 것 · 확인할 것</h2>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>메뉴: 계정 › 비밀번호 · 2단계 인증 · 앱 비밀번호 · 로그인 기록. 새 항목 셋의 아이콘은 방패(체크) · 열쇠 · 시계(되감기).</li>
|
||||
<li>상태는 글자로만 — 「꺼짐」(회색 굵게) · 「켜짐 — 2026년 10월 31일부터」(초록 굵게). 뱃지 · 스위치 없이 [켜기] · [끄기] 단추.</li>
|
||||
<li>켜기 창은 필터 고치기 창과 같은 폭(620), 끄기 창은 확인 창 폭(400). 키의 [복사]는 36 — 차단 풀기와 같은 밀도 예외(새 토큰 없음). 복사하면 알림 「키를 복사했습니다.」</li>
|
||||
<li>비밀번호 화면의 코드 칸은 2단계 인증을 켠 직원에게만, 맨 아래에 둡니다 — 코드가 30초마다 바뀌어 먼저 넣으면 다른 칸을 쓰는 동안 지날 수 있습니다. 틀리면 그 칸 아래 「코드가 올바르지 않습니다. …」.</li>
|
||||
<li>비밀번호를 바꾸면 앱 비밀번호도 모두 지웁니다 — 비밀번호가 샌 동안 누군가 만든 앱 비밀번호가 남지 않게.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":3130}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -38,9 +38,13 @@
|
||||
"LargeFileBlock.dc.html": { "x": 1520, "y": 18920, "w": 1440, "h": 2020, "title": "본문 덩이 — 바깥 메일 프로그램에서" },
|
||||
"MailReadLargeFiles.dc.html": { "x": 3040, "y": 18920, "w": 1440, "h": 1940, "title": "읽기 화면 · 대용량 첨부" },
|
||||
"SharePage.dc.html": { "x": 4560, "y": 18920, "w": 1440, "h": 2130, "title": "내려받기 화면 (files.arasystem.it.kr)" },
|
||||
"SettingsLargeFiles.dc.html": { "x": 6080, "y": 18920, "w": 1440, "h": 2200, "title": "설정 · 대용량 첨부" }
|
||||
"SettingsLargeFiles.dc.html": { "x": 6080, "y": 18920, "w": 1440, "h": 2200, "title": "설정 · 대용량 첨부" },
|
||||
"LoginTwoFactor.dc.html": { "x": 0, "y": 21880, "w": 1440, "h": 1990, "title": "로그인 · 2단계 인증" },
|
||||
"SettingsTwoFactor.dc.html": { "x": 1520, "y": 21880, "w": 1440, "h": 3130, "title": "설정 · 2단계 인증" },
|
||||
"SettingsAppPasswords.dc.html": { "x": 3040, "y": 21880, "w": 1440, "h": 2810, "title": "설정 · 앱 비밀번호" },
|
||||
"SettingsLoginHistory.dc.html": { "x": 4560, "y": 21880, "w": 1440, "h": 2300, "title": "설정 · 로그인 기록" }
|
||||
},
|
||||
"order": ["Main.dc.html", "Login.dc.html", "Compose.dc.html", "States.dc.html", "MainList.dc.html", "MainListRead.dc.html", "ComposeEditor.dc.html", "Settings.dc.html", "ComposeAssist.dc.html", "Search.dc.html", "BulkSelect.dc.html", "ListStates.dc.html", "SettingsAccount.dc.html", "SettingsVacation.dc.html", "MailboxManage.dc.html", "MailActions4.dc.html", "SettingsNotify.dc.html", "MailRealtime.dc.html", "SettingsFilter.dc.html", "MailFilterStates.dc.html", "MailFilterApply.dc.html", "MailFilterApplyStates.dc.html", "Contacts.dc.html", "ContactsEdit.dc.html", "ContactsMail.dc.html", "MailReadTools.dc.html", "MailPrint.dc.html", "MailSendLater.dc.html", "SettingsSendRead.dc.html", "ComposeLargeFiles.dc.html", "LargeFileBlock.dc.html", "MailReadLargeFiles.dc.html", "SharePage.dc.html", "SettingsLargeFiles.dc.html"],
|
||||
"order": ["Main.dc.html", "Login.dc.html", "Compose.dc.html", "States.dc.html", "MainList.dc.html", "MainListRead.dc.html", "ComposeEditor.dc.html", "Settings.dc.html", "ComposeAssist.dc.html", "Search.dc.html", "BulkSelect.dc.html", "ListStates.dc.html", "SettingsAccount.dc.html", "SettingsVacation.dc.html", "MailboxManage.dc.html", "MailActions4.dc.html", "SettingsNotify.dc.html", "MailRealtime.dc.html", "SettingsFilter.dc.html", "MailFilterStates.dc.html", "MailFilterApply.dc.html", "MailFilterApplyStates.dc.html", "Contacts.dc.html", "ContactsEdit.dc.html", "ContactsMail.dc.html", "MailReadTools.dc.html", "MailPrint.dc.html", "MailSendLater.dc.html", "SettingsSendRead.dc.html", "ComposeLargeFiles.dc.html", "LargeFileBlock.dc.html", "MailReadLargeFiles.dc.html", "SharePage.dc.html", "SettingsLargeFiles.dc.html", "LoginTwoFactor.dc.html", "SettingsTwoFactor.dc.html", "SettingsAppPasswords.dc.html", "SettingsLoginHistory.dc.html"],
|
||||
"notes": {
|
||||
"flow": { "x": 0, "y": -300, "text": "arasystem 웹메일 — 1단계 화면 (로그인 → 메일함 → 쓰기)", "kind": "title1", "maxW": 4480 },
|
||||
"phase2": { "x": 0, "y": 2180, "text": "2단계 화면 — 임시 저장 · 받는 사람 자동 완성 · 서명 (2026-10-27 확정)", "kind": "title1", "maxW": 2960 },
|
||||
@@ -51,7 +55,8 @@
|
||||
"phase7": { "x": 0, "y": 12400, "text": "7단계 화면 — 이미 받은 메일에 필터 적용 · 필터 창 나가기 확인 · 부재중 안내 — 2026-10-29 확정", "kind": "title1", "maxW": 2960 },
|
||||
"phase8": { "x": 0, "y": 14280, "text": "8단계 화면 — 주소록 (내 연락처 · 그룹 · 사내 목록 · 메일에서 쓰기) — 2026-10-29 확정", "kind": "title1", "maxW": 4480 },
|
||||
"phase9": { "x": 0, "y": 16520, "text": "9단계 화면 — 보내기 취소 · 예약 발송 · 외부 이미지 보기 · 인쇄 · 보낸 사람 차단 — 2026-10-29 확정", "kind": "title1", "maxW": 6000 },
|
||||
"phase11": { "x": 0, "y": 18620, "text": "11단계 화면 — 대용량 첨부 (쓰기 · 본문 덩이 · 읽기 · 내려받기 화면 · 설정) — 초안, 사용자 확인 전", "kind": "title1", "maxW": 7520 }
|
||||
"phase11": { "x": 0, "y": 18620, "text": "11단계 화면 — 대용량 첨부 (쓰기 · 본문 덩이 · 읽기 · 내려받기 화면 · 설정) — 2026-10-30 확정", "kind": "title1", "maxW": 7520 },
|
||||
"phase12": { "x": 0, "y": 21580, "text": "12단계 화면 — 계정 보안(2단계 인증 · 앱 비밀번호 · 로그인 기록) — 2026-10-31 확정", "kind": "title1", "maxW": 6000 }
|
||||
},
|
||||
"designSystems": []
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user