generated from ttipo/project-base
docs: 13단계 전환 준비 — 계약 6절 · 디자인 보드 넷 · README
관리자가 준 임시 비밀번호 바꾸기 · 2단계 인증 필수 · 메일 프로그램 연결 안내 · 받은편지함 알림 메일 · 휴지통 30일 안내와 서버 안 운영 도구를 정했다. 엔진 실험(Stalwart 0.16.27): 계정 끄기 칸이 없어 로그인 권한을 빼서 잠그고, 비밀번호가 만료되면 웹메일(대리 접근)도 메일 메서드가 막혀 서버가 새 비밀번호 단계로 보낸다. 사용자 결정(2026-10-31): 새 비밀번호 단계는 다음 코드를 기다려 넣고, 필수 직원의 휴대폰 바꾸기는 관리자 해제, 알림 메일에는 링크를 넣지 않고, 새 Outlook 은 권하지 않는다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,439 @@
|
||||
<!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}
|
||||
.danger{background:transparent;color:#B42318}
|
||||
.danger:hover{background:#FEF3F2;color:#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}
|
||||
.notice-btn{background:#FFFFFF;color:#7A5200;border:1px solid #F0D9A8}
|
||||
.notice-btn:hover{background:#FFF1D6}
|
||||
.tool{background:transparent;color:#344054}
|
||||
.tool:hover{background:#F2F4F7;color:#171C26}
|
||||
.toast-action{background:transparent;color:#9ED6DB}
|
||||
.toast-action:hover{background:rgba(255,255,255,0.1)}
|
||||
.menu-link{color:#344054}
|
||||
.menu-link:hover{background:#EEF0F3}
|
||||
.acc{background:transparent;color:#171C26}
|
||||
.acc:hover{background:#F8F9FB}
|
||||
.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}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 2900px; 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: 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">새 비밀번호를 정해 주세요</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="pc-new" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-new" class="pw-input" type="password" autocomplete="new-password" value="" aria-describedby="pc-new-hint" style="font-size: 14px">
|
||||
<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="pc-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="pc-confirm" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호 확인</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-confirm" class="pw-input" type="password" autocomplete="new-password" value="" style="font-size: 14px">
|
||||
</div>
|
||||
</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; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 12px; line-height: 1.6; color: #667085">메일 프로그램(아웃룩 등)을 연결해 두었다면 바꾼 뒤 다시 연결해야 합니다.</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">로그인 · 새 비밀번호 정하기</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">관리자가 임시 비밀번호를 준 직원(입사 · 재설정)은 비밀번호가 맞으면 위 화면으로 옵니다. 화면 틀 · 칸 · 단추는 로그인 화면과 같고, 칸 규칙은 설정 › 비밀번호와 같습니다. 오류 문구는 에러 코드 사전에서 가져옵니다. 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">새 비밀번호를 정해 주세요</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="pc-new-rule" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호</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; box-shadow: 0 0 0 1px #B42318">
|
||||
<input id="pc-new-rule" class="pw-input" type="password" autocomplete="new-password" value="••••••" aria-invalid="true" aria-describedby="pc-new-rule-error" style="font-size: 14px">
|
||||
<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="pc-new-rule-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>8자 이상 · 임시 비밀번호와 달라야 합니다. 영문 · 숫자 · 기호를 섞으면 더 안전합니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pc-confirm-rule" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호 확인</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-confirm-rule" class="pw-input" type="password" autocomplete="new-password" value="••••••" style="font-size: 14px">
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">8자보다 짧거나 임시 비밀번호와 같으면 보내지 않고 이렇게 알립니다. 메일 서버가 규칙에 어긋난다고 거절하면 같은 자리에 사전 문구(VAL_001)입니다.</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">새 비밀번호를 정해 주세요</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="pc-new-mismatch" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-new-mismatch" class="pw-input" type="password" autocomplete="new-password" value="•••••••••••" aria-describedby="pc-new-mismatch-hint" style="font-size: 14px">
|
||||
<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="pc-new-mismatch-hint" style="margin: 0; font-size: 12.5px; color: #667085">8자 이상 · 임시 비밀번호와 달라야 합니다. 영문 · 숫자 · 기호를 섞으면 더 안전합니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pc-confirm-mismatch" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호 확인</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; box-shadow: 0 0 0 1px #B42318">
|
||||
<input id="pc-confirm-mismatch" class="pw-input" type="password" autocomplete="new-password" value="••••••••••" aria-invalid="true" aria-describedby="pc-confirm-mismatch-error" style="font-size: 14px">
|
||||
</div>
|
||||
<p id="pc-confirm-mismatch-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>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">확인 칸은 새 비밀번호의 [보기]를 따라 함께 보이거나 가려집니다(설정 › 비밀번호와 같다).</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">새 비밀번호를 정해 주세요</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="pc-new-busy" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF; background: #F8F9FB">
|
||||
<input id="pc-new-busy" class="pw-input" type="password" autocomplete="new-password" value="•••••••••••" readonly aria-describedby="pc-new-busy-hint" style="font-size: 14px; color: #4A5363">
|
||||
<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="pc-new-busy-hint" style="margin: 0; font-size: 12.5px; color: #667085">8자 이상 · 임시 비밀번호와 달라야 합니다. 영문 · 숫자 · 기호를 섞으면 더 안전합니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pc-confirm-busy" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호 확인</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF; background: #F8F9FB">
|
||||
<input id="pc-confirm-busy" class="pw-input" type="password" autocomplete="new-password" value="•••••••••••" readonly style="font-size: 14px; color: #4A5363">
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">로그인 단추와 같은 모양입니다(「바꾸는 중…」 · aria-busy). 메일 서버에서 바꾸고 다른 곳의 로그인을 끊느라 길게는 30초 걸립니다.</p>
|
||||
</section>
|
||||
</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">새 비밀번호를 정해 주세요</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="pc-new-locked" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-new-locked" class="pw-input" type="password" autocomplete="new-password" value="•••••••••••" aria-describedby="pc-new-locked-hint" style="font-size: 14px">
|
||||
<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="pc-new-locked-hint" style="margin: 0; font-size: 12.5px; color: #667085">8자 이상 · 임시 비밀번호와 달라야 합니다. 영문 · 숫자 · 기호를 섞으면 더 안전합니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pc-confirm-locked" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호 확인</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-confirm-locked" class="pw-input" type="password" autocomplete="new-password" value="•••••••••••" style="font-size: 14px">
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">임시 비밀번호 틀림은 로그인 실패 한도로, 코드 틀림은 코드 실패 한도로 셉니다(설정 › 비밀번호와 같은 규칙). 문구는 사전의 「요청이 너무 많습니다」. 칸 · 단추는 그대로 둡니다.</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">2단계 인증을 켠 직원</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">새 비밀번호를 정해 주세요</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="pc-new-tf" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-new-tf" class="pw-input" type="password" autocomplete="new-password" value="•••••••••••" aria-describedby="pc-new-tf-hint" style="font-size: 14px">
|
||||
<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="pc-new-tf-hint" style="margin: 0; font-size: 12.5px; color: #667085">8자 이상 · 임시 비밀번호와 달라야 합니다. 영문 · 숫자 · 기호를 섞으면 더 안전합니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pc-confirm-tf" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호 확인</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-confirm-tf" class="pw-input" type="password" autocomplete="new-password" value="•••••••••••" style="font-size: 14px">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pc-code-tf" style="font-size: 12.5px; font-weight: 600; color: #344054">인증 앱 코드</label>
|
||||
<input id="pc-code-tf" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" value="" aria-describedby="pc-code-tf-hint" 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">
|
||||
<p id="pc-code-tf-hint" style="margin: 0; font-size: 12.5px; color: #667085">로그인할 때 넣은 코드는 다시 쓸 수 없습니다 — 앱에 다음 코드가 뜨면 넣어 주세요.</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>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">관리자가 비밀번호만 재설정하면 2단계 인증은 그대로라 코드가 필요합니다. 틀리면 그 칸 아래 「코드가 올바르지 않습니다. …」(AUTH_006) · 칸을 비웁니다.</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">새 비밀번호를 정해 주세요</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="pc-temp-refresh" style="font-size: 12.5px; font-weight: 600; color: #344054">임시 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-temp-refresh" class="pw-input" type="password" autocomplete="current-password" value="" aria-describedby="pc-temp-refresh-hint" style="font-size: 14px">
|
||||
<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="pc-temp-refresh-hint" style="margin: 0; font-size: 12.5px; color: #667085">관리자에게 받은 임시 비밀번호를 다시 넣어 주세요.</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pc-new-refresh" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-new-refresh" class="pw-input" type="password" autocomplete="new-password" value="" aria-describedby="pc-new-refresh-hint" style="font-size: 14px">
|
||||
<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="pc-new-refresh-hint" style="margin: 0; font-size: 12.5px; color: #667085">8자 이상 · 임시 비밀번호와 달라야 합니다. 영문 · 숫자 · 기호를 섞으면 더 안전합니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="pc-confirm-refresh" style="font-size: 12.5px; font-weight: 600; color: #344054">새 비밀번호 확인</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="pc-confirm-refresh" class="pw-input" type="password" autocomplete="new-password" value="" style="font-size: 14px">
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">틀리면 그 칸 아래 「지금 비밀번호가 올바르지 않습니다.」(AUTH_005). 바꾸지 않고 탭을 닫았다 다시 열어도 이 화면입니다.</p>
|
||||
</section>
|
||||
</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 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">제한이 풀리면 받은편지함으로 갑니다 — 로그인 전에 가려던 주소가 있으면 그곳으로. 회사가 2단계 인증을 필수로 정했는데 아직 켜지 않은 직원은 받은편지함 대신 「2단계 인증 켜기」 단계로 이어집니다(다음 보드).</p>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">다른 곳의 웹메일 로그인을 끊고 앱 비밀번호를 지우는 것은 설정 › 비밀번호와 같습니다 — 위 화면 맨 아래 안내 줄이 그 까닭입니다.</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>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>누가 오나: 관리자가 운영 도구로 입사 · 비밀번호 재설정을 한 직원 — 받은 임시 비밀번호로 처음 로그인할 때입니다. 서버가 로그인 때 알아채 세션에 제한을 붙이고, 이 단계를 마칠 때까지 메일 · 주소록 · 설정을 열 수 없습니다(AUTH_010).</li>
|
||||
<li>새로고침 · 다른 탭 · 주소를 바꿔 들어가도 이 단계로 옵니다 — 서버가 막습니다.</li>
|
||||
<li>2단계 인증을 켠 직원은 비밀번호 → 코드 → 이 단계입니다(비밀번호만 재설정하면 2단계 인증은 그대로).</li>
|
||||
<li>칸 규칙은 설정 › 비밀번호와 같습니다 — 8자 이상 · 임시 비밀번호와 다름 · 확인 칸 일치. 보내기 전에 화면이 먼저 보고, 처음 걸린 칸에 초점을 둡니다.</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>임시 비밀번호는 로그인 때 넣은 것을 화면 메모리에서 씁니다 — 다시 묻지 않습니다. 메모리에 없으면(새로고침 · 다른 탭) 맨 위에 「임시 비밀번호」 칸.</li>
|
||||
<li>화면 메모리의 임시 비밀번호는 10분 뒤 지웁니다(12단계 코드 단계와 같은 10분) — 그 뒤에는 맨 위에 「임시 비밀번호」 칸이 생깁니다.</li>
|
||||
<li>2단계 인증을 켠 직원은 앱에 다음 코드가 뜨면 넣습니다 — 엔진이 비밀번호를 바꿀 때 코드를 꼭 요구하고, 로그인 때 쓴 코드를 서버가 기억해 다시 써도 새 비밀번호를 치는 사이 코드의 유효 시간(앞뒤 30초)을 지날 수 있습니다.</li>
|
||||
<li>바꾸는 요청은 30초까지 기다립니다(설정 › 비밀번호와 같은 한도).</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2900}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,723 @@
|
||||
<!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}
|
||||
.danger{background:transparent;color:#B42318}
|
||||
.danger:hover{background:#FEF3F2;color:#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}
|
||||
.notice-btn{background:#FFFFFF;color:#7A5200;border:1px solid #F0D9A8}
|
||||
.notice-btn:hover{background:#FFF1D6}
|
||||
.tool{background:transparent;color:#344054}
|
||||
.tool:hover{background:#F2F4F7;color:#171C26}
|
||||
.toast-action{background:transparent;color:#9ED6DB}
|
||||
.toast-action:hover{background:rgba(255,255,255,0.1)}
|
||||
.menu-link{color:#344054}
|
||||
.menu-link:hover{background:#EEF0F3}
|
||||
.acc{background:transparent;color:#171C26}
|
||||
.acc:hover{background:#F8F9FB}
|
||||
.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}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 4290px; 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">
|
||||
<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: 8px">
|
||||
<span style="font-weight: 600">인증 앱으로 QR 코드를 찍어 주세요</span>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">인증 앱에서 [+] → 「QR 코드 스캔」을 고릅니다. 앱이 없으면 Google Authenticator · Microsoft Authenticator 를 먼저 설치해 주세요.</p>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px">
|
||||
<div style="flex: 0 0 auto; padding: 6px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FFFFFF">
|
||||
<svg role="img" aria-label="인증 앱에 등록할 QR 코드" width="148" height="148" viewBox="0 0 37 37" shape-rendering="crispEdges" style="display: block"><path fill="#171C26" d="M2 2h7v1h-7zM11 2h2v1h-2zM16 2h2v1h-2zM19 2h2v1h-2zM22 2h1v1h-1zM28 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM14 3h2v1h-2zM18 3h1v1h-1zM20 3h1v1h-1zM22 3h1v1h-1zM25 3h2v1h-2zM28 3h1v1h-1zM34 3h1v1h-1zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM12 4h2v1h-2zM19 4h1v1h-1zM23 4h3v1h-3zM28 4h1v1h-1zM30 4h3v1h-3zM34 4h1v1h-1zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h1v1h-1zM10 5h2v1h-2zM17 5h2v1h-2zM21 5h1v1h-1zM26 5h1v1h-1zM28 5h1v1h-1zM30 5h3v1h-3zM34 5h1v1h-1zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h1v1h-1zM13 6h1v1h-1zM15 6h1v1h-1zM17 6h1v1h-1zM21 6h4v1h-4zM26 6h1v1h-1zM28 6h1v1h-1zM30 6h3v1h-3zM34 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM12 7h2v1h-2zM15 7h1v1h-1zM20 7h1v1h-1zM22 7h2v1h-2zM28 7h1v1h-1zM34 7h1v1h-1zM2 8h7v1h-7zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h1v1h-1zM22 8h1v1h-1zM24 8h1v1h-1zM26 8h1v1h-1zM28 8h7v1h-7zM10 9h4v1h-4zM16 9h1v1h-1zM18 9h1v1h-1zM21 9h1v1h-1zM24 9h2v1h-2zM3 10h1v1h-1zM5 10h1v1h-1zM7 10h2v1h-2zM14 10h4v1h-4zM21 10h5v1h-5zM29 10h2v1h-2zM32 10h1v1h-1zM34 10h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM6 11h2v1h-2zM10 11h6v1h-6zM20 11h2v1h-2zM24 11h7v1h-7zM32 11h1v1h-1zM34 11h1v1h-1zM3 12h2v1h-2zM6 12h1v1h-1zM8 12h2v1h-2zM11 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM19 12h2v1h-2zM25 12h2v1h-2zM31 12h2v1h-2zM7 13h1v1h-1zM9 13h1v1h-1zM12 13h2v1h-2zM17 13h1v1h-1zM19 13h2v1h-2zM23 13h2v1h-2zM27 13h2v1h-2zM30 13h2v1h-2zM2 14h2v1h-2zM5 14h1v1h-1zM7 14h2v1h-2zM10 14h2v1h-2zM13 14h2v1h-2zM16 14h2v1h-2zM19 14h1v1h-1zM21 14h3v1h-3zM25 14h2v1h-2zM28 14h1v1h-1zM31 14h1v1h-1zM33 14h2v1h-2zM2 15h6v1h-6zM9 15h1v1h-1zM13 15h1v1h-1zM17 15h2v1h-2zM21 15h4v1h-4zM26 15h1v1h-1zM28 15h1v1h-1zM30 15h3v1h-3zM34 15h1v1h-1zM3 16h1v1h-1zM5 16h1v1h-1zM7 16h5v1h-5zM14 16h2v1h-2zM18 16h1v1h-1zM20 16h1v1h-1zM22 16h1v1h-1zM25 16h2v1h-2zM28 16h1v1h-1zM30 16h3v1h-3zM4 17h1v1h-1zM6 17h2v1h-2zM10 17h4v1h-4zM16 17h1v1h-1zM18 17h1v1h-1zM20 17h1v1h-1zM22 17h2v1h-2zM27 17h2v1h-2zM30 17h2v1h-2zM34 17h1v1h-1zM4 18h3v1h-3zM8 18h1v1h-1zM12 18h1v1h-1zM14 18h1v1h-1zM16 18h4v1h-4zM21 18h4v1h-4zM27 18h3v1h-3zM32 18h1v1h-1zM34 18h1v1h-1zM3 19h2v1h-2zM9 19h2v1h-2zM14 19h2v1h-2zM17 19h3v1h-3zM22 19h3v1h-3zM26 19h1v1h-1zM28 19h1v1h-1zM30 19h1v1h-1zM32 19h1v1h-1zM3 20h10v1h-10zM17 20h2v1h-2zM20 20h1v1h-1zM22 20h1v1h-1zM24 20h1v1h-1zM26 20h2v1h-2zM29 20h1v1h-1zM33 20h1v1h-1zM3 21h1v1h-1zM6 21h1v1h-1zM9 21h1v1h-1zM11 21h2v1h-2zM19 21h1v1h-1zM21 21h2v1h-2zM26 21h2v1h-2zM29 21h4v1h-4zM34 21h1v1h-1zM2 22h1v1h-1zM6 22h1v1h-1zM8 22h3v1h-3zM15 22h1v1h-1zM17 22h2v1h-2zM21 22h1v1h-1zM24 22h3v1h-3zM30 22h1v1h-1zM34 22h1v1h-1zM9 23h2v1h-2zM12 23h1v1h-1zM15 23h2v1h-2zM27 23h2v1h-2zM30 23h2v1h-2zM2 24h4v1h-4zM7 24h5v1h-5zM13 24h2v1h-2zM18 24h1v1h-1zM20 24h1v1h-1zM23 24h1v1h-1zM26 24h1v1h-1zM29 24h3v1h-3zM4 25h2v1h-2zM7 25h1v1h-1zM12 25h1v1h-1zM15 25h2v1h-2zM19 25h3v1h-3zM23 25h1v1h-1zM28 25h2v1h-2zM32 25h1v1h-1zM3 26h1v1h-1zM6 26h1v1h-1zM8 26h2v1h-2zM12 26h1v1h-1zM14 26h1v1h-1zM16 26h3v1h-3zM24 26h8v1h-8zM33 26h2v1h-2zM10 27h2v1h-2zM13 27h1v1h-1zM15 27h3v1h-3zM20 27h1v1h-1zM23 27h1v1h-1zM25 27h2v1h-2zM30 27h4v1h-4zM2 28h7v1h-7zM10 28h4v1h-4zM18 28h1v1h-1zM21 28h1v1h-1zM23 28h1v1h-1zM26 28h1v1h-1zM28 28h1v1h-1zM30 28h3v1h-3zM34 28h1v1h-1zM2 29h1v1h-1zM8 29h1v1h-1zM12 29h1v1h-1zM14 29h2v1h-2zM17 29h2v1h-2zM23 29h2v1h-2zM26 29h1v1h-1zM30 29h3v1h-3zM34 29h1v1h-1zM2 30h1v1h-1zM4 30h3v1h-3zM8 30h1v1h-1zM13 30h3v1h-3zM21 30h1v1h-1zM24 30h1v1h-1zM26 30h5v1h-5zM32 30h1v1h-1zM2 31h1v1h-1zM4 31h3v1h-3zM8 31h1v1h-1zM11 31h1v1h-1zM13 31h1v1h-1zM15 31h4v1h-4zM22 31h2v1h-2zM28 31h3v1h-3zM32 31h3v1h-3zM2 32h1v1h-1zM4 32h3v1h-3zM8 32h1v1h-1zM10 32h2v1h-2zM14 32h1v1h-1zM16 32h4v1h-4zM21 32h3v1h-3zM28 32h1v1h-1zM31 32h4v1h-4zM2 33h1v1h-1zM8 33h1v1h-1zM14 33h1v1h-1zM19 33h1v1h-1zM22 33h1v1h-1zM26 33h1v1h-1zM28 33h1v1h-1zM30 33h1v1h-1zM33 33h2v1h-2zM2 34h7v1h-7zM10 34h2v1h-2zM13 34h3v1h-3zM18 34h1v1h-1zM20 34h3v1h-3zM25 34h1v1h-1zM28 34h1v1h-1zM31 34h1v1h-1zM33 34h2v1h-2z"></path></svg>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<span id="ts-key-label" style="font-size: 12px; font-weight: 600; color: #4A5363">찍을 수 없으면 이 키를 입력하세요</span>
|
||||
<code aria-labelledby="ts-key-label" style="display: block; box-sizing: border-box; padding: 6px 8px; border: 1px solid #E6E8EC; border-radius: 6px; background: #F8F9FB; font-family: Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 12px; line-height: 1.6; color: #171C26; white-space: nowrap">K7QF 2M4X HB6R TZ3N<br>PW5C YL7D JQ2V MGAS</code>
|
||||
<button type="button" class="line-btn" aria-label="키 복사" style="align-self: flex-start; 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>
|
||||
</div>
|
||||
<span style="font-size: 12px; color: #667085">앱에는 「ARA SYSTEM (ara.kim@arasystem.it.kr)」로 저장됩니다.</span>
|
||||
</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="ts-code" style="font-size: 12.5px; font-weight: 600; color: #344054">앱에 표시된 6자리 코드</label>
|
||||
<input id="ts-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>
|
||||
</li>
|
||||
</ol>
|
||||
<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">인증 앱을 쓸 수 없나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></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단계 인증을 필수로 정한 뒤 아직 켜지 않은 직원은 비밀번호가 맞으면 위 화면으로 옵니다. 12단계 켜기 창의 ① QR · 키와 ② 코드를 한 화면에 두고, 지금 비밀번호는 방금 확인했으므로 묻지 않습니다. 틀 · 칸 · 단추는 로그인 화면과 같습니다. 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">
|
||||
<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: 8px">
|
||||
<span style="font-weight: 600">인증 앱으로 QR 코드를 찍어 주세요</span>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">인증 앱에서 [+] → 「QR 코드 스캔」을 고릅니다. 앱이 없으면 Google Authenticator · Microsoft Authenticator 를 먼저 설치해 주세요.</p>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px">
|
||||
<div style="flex: 0 0 auto; padding: 6px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FFFFFF">
|
||||
<svg role="img" aria-label="인증 앱에 등록할 QR 코드" width="148" height="148" viewBox="0 0 37 37" shape-rendering="crispEdges" style="display: block"><path fill="#171C26" d="M2 2h7v1h-7zM11 2h2v1h-2zM16 2h2v1h-2zM19 2h2v1h-2zM22 2h1v1h-1zM28 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM14 3h2v1h-2zM18 3h1v1h-1zM20 3h1v1h-1zM22 3h1v1h-1zM25 3h2v1h-2zM28 3h1v1h-1zM34 3h1v1h-1zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM12 4h2v1h-2zM19 4h1v1h-1zM23 4h3v1h-3zM28 4h1v1h-1zM30 4h3v1h-3zM34 4h1v1h-1zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h1v1h-1zM10 5h2v1h-2zM17 5h2v1h-2zM21 5h1v1h-1zM26 5h1v1h-1zM28 5h1v1h-1zM30 5h3v1h-3zM34 5h1v1h-1zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h1v1h-1zM13 6h1v1h-1zM15 6h1v1h-1zM17 6h1v1h-1zM21 6h4v1h-4zM26 6h1v1h-1zM28 6h1v1h-1zM30 6h3v1h-3zM34 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM12 7h2v1h-2zM15 7h1v1h-1zM20 7h1v1h-1zM22 7h2v1h-2zM28 7h1v1h-1zM34 7h1v1h-1zM2 8h7v1h-7zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h1v1h-1zM22 8h1v1h-1zM24 8h1v1h-1zM26 8h1v1h-1zM28 8h7v1h-7zM10 9h4v1h-4zM16 9h1v1h-1zM18 9h1v1h-1zM21 9h1v1h-1zM24 9h2v1h-2zM3 10h1v1h-1zM5 10h1v1h-1zM7 10h2v1h-2zM14 10h4v1h-4zM21 10h5v1h-5zM29 10h2v1h-2zM32 10h1v1h-1zM34 10h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM6 11h2v1h-2zM10 11h6v1h-6zM20 11h2v1h-2zM24 11h7v1h-7zM32 11h1v1h-1zM34 11h1v1h-1zM3 12h2v1h-2zM6 12h1v1h-1zM8 12h2v1h-2zM11 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM19 12h2v1h-2zM25 12h2v1h-2zM31 12h2v1h-2zM7 13h1v1h-1zM9 13h1v1h-1zM12 13h2v1h-2zM17 13h1v1h-1zM19 13h2v1h-2zM23 13h2v1h-2zM27 13h2v1h-2zM30 13h2v1h-2zM2 14h2v1h-2zM5 14h1v1h-1zM7 14h2v1h-2zM10 14h2v1h-2zM13 14h2v1h-2zM16 14h2v1h-2zM19 14h1v1h-1zM21 14h3v1h-3zM25 14h2v1h-2zM28 14h1v1h-1zM31 14h1v1h-1zM33 14h2v1h-2zM2 15h6v1h-6zM9 15h1v1h-1zM13 15h1v1h-1zM17 15h2v1h-2zM21 15h4v1h-4zM26 15h1v1h-1zM28 15h1v1h-1zM30 15h3v1h-3zM34 15h1v1h-1zM3 16h1v1h-1zM5 16h1v1h-1zM7 16h5v1h-5zM14 16h2v1h-2zM18 16h1v1h-1zM20 16h1v1h-1zM22 16h1v1h-1zM25 16h2v1h-2zM28 16h1v1h-1zM30 16h3v1h-3zM4 17h1v1h-1zM6 17h2v1h-2zM10 17h4v1h-4zM16 17h1v1h-1zM18 17h1v1h-1zM20 17h1v1h-1zM22 17h2v1h-2zM27 17h2v1h-2zM30 17h2v1h-2zM34 17h1v1h-1zM4 18h3v1h-3zM8 18h1v1h-1zM12 18h1v1h-1zM14 18h1v1h-1zM16 18h4v1h-4zM21 18h4v1h-4zM27 18h3v1h-3zM32 18h1v1h-1zM34 18h1v1h-1zM3 19h2v1h-2zM9 19h2v1h-2zM14 19h2v1h-2zM17 19h3v1h-3zM22 19h3v1h-3zM26 19h1v1h-1zM28 19h1v1h-1zM30 19h1v1h-1zM32 19h1v1h-1zM3 20h10v1h-10zM17 20h2v1h-2zM20 20h1v1h-1zM22 20h1v1h-1zM24 20h1v1h-1zM26 20h2v1h-2zM29 20h1v1h-1zM33 20h1v1h-1zM3 21h1v1h-1zM6 21h1v1h-1zM9 21h1v1h-1zM11 21h2v1h-2zM19 21h1v1h-1zM21 21h2v1h-2zM26 21h2v1h-2zM29 21h4v1h-4zM34 21h1v1h-1zM2 22h1v1h-1zM6 22h1v1h-1zM8 22h3v1h-3zM15 22h1v1h-1zM17 22h2v1h-2zM21 22h1v1h-1zM24 22h3v1h-3zM30 22h1v1h-1zM34 22h1v1h-1zM9 23h2v1h-2zM12 23h1v1h-1zM15 23h2v1h-2zM27 23h2v1h-2zM30 23h2v1h-2zM2 24h4v1h-4zM7 24h5v1h-5zM13 24h2v1h-2zM18 24h1v1h-1zM20 24h1v1h-1zM23 24h1v1h-1zM26 24h1v1h-1zM29 24h3v1h-3zM4 25h2v1h-2zM7 25h1v1h-1zM12 25h1v1h-1zM15 25h2v1h-2zM19 25h3v1h-3zM23 25h1v1h-1zM28 25h2v1h-2zM32 25h1v1h-1zM3 26h1v1h-1zM6 26h1v1h-1zM8 26h2v1h-2zM12 26h1v1h-1zM14 26h1v1h-1zM16 26h3v1h-3zM24 26h8v1h-8zM33 26h2v1h-2zM10 27h2v1h-2zM13 27h1v1h-1zM15 27h3v1h-3zM20 27h1v1h-1zM23 27h1v1h-1zM25 27h2v1h-2zM30 27h4v1h-4zM2 28h7v1h-7zM10 28h4v1h-4zM18 28h1v1h-1zM21 28h1v1h-1zM23 28h1v1h-1zM26 28h1v1h-1zM28 28h1v1h-1zM30 28h3v1h-3zM34 28h1v1h-1zM2 29h1v1h-1zM8 29h1v1h-1zM12 29h1v1h-1zM14 29h2v1h-2zM17 29h2v1h-2zM23 29h2v1h-2zM26 29h1v1h-1zM30 29h3v1h-3zM34 29h1v1h-1zM2 30h1v1h-1zM4 30h3v1h-3zM8 30h1v1h-1zM13 30h3v1h-3zM21 30h1v1h-1zM24 30h1v1h-1zM26 30h5v1h-5zM32 30h1v1h-1zM2 31h1v1h-1zM4 31h3v1h-3zM8 31h1v1h-1zM11 31h1v1h-1zM13 31h1v1h-1zM15 31h4v1h-4zM22 31h2v1h-2zM28 31h3v1h-3zM32 31h3v1h-3zM2 32h1v1h-1zM4 32h3v1h-3zM8 32h1v1h-1zM10 32h2v1h-2zM14 32h1v1h-1zM16 32h4v1h-4zM21 32h3v1h-3zM28 32h1v1h-1zM31 32h4v1h-4zM2 33h1v1h-1zM8 33h1v1h-1zM14 33h1v1h-1zM19 33h1v1h-1zM22 33h1v1h-1zM26 33h1v1h-1zM28 33h1v1h-1zM30 33h1v1h-1zM33 33h2v1h-2zM2 34h7v1h-7zM10 34h2v1h-2zM13 34h3v1h-3zM18 34h1v1h-1zM20 34h3v1h-3zM25 34h1v1h-1zM28 34h1v1h-1zM31 34h1v1h-1zM33 34h2v1h-2z"></path></svg>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<span id="ts-key-label-wrong" style="font-size: 12px; font-weight: 600; color: #4A5363">찍을 수 없으면 이 키를 입력하세요</span>
|
||||
<code aria-labelledby="ts-key-label-wrong" style="display: block; box-sizing: border-box; padding: 6px 8px; border: 1px solid #E6E8EC; border-radius: 6px; background: #F8F9FB; font-family: Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 12px; line-height: 1.6; color: #171C26; white-space: nowrap">K7QF 2M4X HB6R TZ3N<br>PW5C YL7D JQ2V MGAS</code>
|
||||
<button type="button" class="line-btn" aria-label="키 복사" style="align-self: flex-start; 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>
|
||||
</div>
|
||||
<span style="font-size: 12px; color: #667085">앱에는 「ARA SYSTEM (ara.kim@arasystem.it.kr)」로 저장됩니다.</span>
|
||||
</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="ts-code-wrong" style="font-size: 12.5px; font-weight: 600; color: #344054">앱에 표시된 6자리 코드</label>
|
||||
<input id="ts-code-wrong" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" value="" aria-invalid="true" aria-describedby="ts-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="ts-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>
|
||||
</li>
|
||||
</ol>
|
||||
<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">인증 앱을 쓸 수 없나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">QR · 키는 그대로라 다시 찍지 않아도 됩니다. 앱에 다음 코드가 뜨면 넣습니다(AUTH_006).</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>2단계 인증 설정이 그사이 바뀌었거나 시간이 지났습니다. 처음부터 다시 해 주세요.</span>
|
||||
</p>
|
||||
|
||||
<form style="display: flex; flex-direction: column; gap: 14px">
|
||||
<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: 8px">
|
||||
<span style="font-weight: 600">인증 앱으로 QR 코드를 찍어 주세요</span>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">인증 앱에서 [+] → 「QR 코드 스캔」을 고릅니다. 앱이 없으면 Google Authenticator · Microsoft Authenticator 를 먼저 설치해 주세요.</p>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px">
|
||||
<div style="flex: 0 0 auto; padding: 6px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FFFFFF">
|
||||
<svg role="img" aria-label="인증 앱에 등록할 QR 코드" width="148" height="148" viewBox="0 0 37 37" shape-rendering="crispEdges" style="display: block"><path fill="#171C26" d="M2 2h7v1h-7zM12 2h1v1h-1zM14 2h3v1h-3zM21 2h5v1h-5zM28 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM10 3h2v1h-2zM13 3h2v1h-2zM17 3h2v1h-2zM23 3h2v1h-2zM26 3h1v1h-1zM28 3h1v1h-1zM34 3h1v1h-1zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM11 4h1v1h-1zM13 4h1v1h-1zM15 4h1v1h-1zM18 4h1v1h-1zM23 4h1v1h-1zM28 4h1v1h-1zM30 4h3v1h-3zM34 4h1v1h-1zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h1v1h-1zM10 5h1v1h-1zM23 5h1v1h-1zM28 5h1v1h-1zM30 5h3v1h-3zM34 5h1v1h-1zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h1v1h-1zM10 6h1v1h-1zM15 6h1v1h-1zM17 6h2v1h-2zM20 6h1v1h-1zM28 6h1v1h-1zM30 6h3v1h-3zM34 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM12 7h2v1h-2zM16 7h4v1h-4zM24 7h3v1h-3zM28 7h1v1h-1zM34 7h1v1h-1zM2 8h7v1h-7zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h1v1h-1zM22 8h1v1h-1zM24 8h1v1h-1zM26 8h1v1h-1zM28 8h7v1h-7zM10 9h1v1h-1zM16 9h2v1h-2zM21 9h2v1h-2zM25 9h1v1h-1zM2 10h1v1h-1zM4 10h1v1h-1zM6 10h3v1h-3zM17 10h5v1h-5zM27 10h1v1h-1zM30 10h2v1h-2zM34 10h1v1h-1zM4 11h1v1h-1zM6 11h2v1h-2zM10 11h2v1h-2zM13 11h1v1h-1zM16 11h2v1h-2zM19 11h1v1h-1zM22 11h1v1h-1zM27 11h3v1h-3zM31 11h3v1h-3zM2 12h3v1h-3zM6 12h1v1h-1zM8 12h3v1h-3zM13 12h1v1h-1zM18 12h4v1h-4zM24 12h2v1h-2zM27 12h2v1h-2zM30 12h3v1h-3zM3 13h1v1h-1zM7 13h1v1h-1zM9 13h1v1h-1zM11 13h1v1h-1zM15 13h2v1h-2zM18 13h4v1h-4zM24 13h1v1h-1zM26 13h2v1h-2zM30 13h1v1h-1zM2 14h2v1h-2zM5 14h1v1h-1zM8 14h1v1h-1zM13 14h1v1h-1zM16 14h1v1h-1zM18 14h1v1h-1zM21 14h1v1h-1zM25 14h1v1h-1zM27 14h1v1h-1zM30 14h2v1h-2zM33 14h2v1h-2zM2 15h1v1h-1zM6 15h2v1h-2zM9 15h3v1h-3zM13 15h2v1h-2zM16 15h1v1h-1zM20 15h4v1h-4zM28 15h2v1h-2zM32 15h1v1h-1zM34 15h1v1h-1zM3 16h4v1h-4zM8 16h1v1h-1zM11 16h2v1h-2zM19 16h1v1h-1zM22 16h6v1h-6zM30 16h3v1h-3zM6 17h2v1h-2zM9 17h2v1h-2zM12 17h1v1h-1zM14 17h1v1h-1zM21 17h3v1h-3zM25 17h1v1h-1zM29 17h2v1h-2zM33 17h1v1h-1zM2 18h2v1h-2zM5 18h5v1h-5zM11 18h1v1h-1zM13 18h1v1h-1zM15 18h2v1h-2zM18 18h2v1h-2zM24 18h1v1h-1zM26 18h2v1h-2zM31 18h1v1h-1zM2 19h1v1h-1zM5 19h2v1h-2zM10 19h1v1h-1zM12 19h1v1h-1zM16 19h2v1h-2zM19 19h2v1h-2zM22 19h2v1h-2zM25 19h2v1h-2zM28 19h1v1h-1zM31 19h1v1h-1zM33 19h1v1h-1zM8 20h1v1h-1zM10 20h1v1h-1zM12 20h1v1h-1zM17 20h3v1h-3zM25 20h1v1h-1zM30 20h1v1h-1zM32 20h1v1h-1zM5 21h1v1h-1zM12 21h1v1h-1zM16 21h1v1h-1zM19 21h1v1h-1zM24 21h1v1h-1zM27 21h1v1h-1zM29 21h1v1h-1zM32 21h3v1h-3zM3 22h3v1h-3zM8 22h1v1h-1zM13 22h1v1h-1zM17 22h3v1h-3zM22 22h1v1h-1zM31 22h1v1h-1zM34 22h1v1h-1zM2 23h1v1h-1zM4 23h4v1h-4zM9 23h2v1h-2zM12 23h1v1h-1zM15 23h1v1h-1zM17 23h3v1h-3zM24 23h3v1h-3zM30 23h2v1h-2zM34 23h1v1h-1zM3 24h1v1h-1zM8 24h2v1h-2zM17 24h2v1h-2zM22 24h1v1h-1zM24 24h1v1h-1zM26 24h1v1h-1zM29 24h1v1h-1zM33 24h2v1h-2zM3 25h2v1h-2zM10 25h1v1h-1zM14 25h1v1h-1zM17 25h2v1h-2zM21 25h1v1h-1zM27 25h2v1h-2zM30 25h3v1h-3zM3 26h1v1h-1zM7 26h2v1h-2zM12 26h2v1h-2zM15 26h5v1h-5zM22 26h9v1h-9zM32 26h2v1h-2zM10 27h3v1h-3zM16 27h1v1h-1zM18 27h1v1h-1zM22 27h2v1h-2zM25 27h2v1h-2zM30 27h3v1h-3zM34 27h1v1h-1zM2 28h7v1h-7zM10 28h1v1h-1zM13 28h3v1h-3zM17 28h1v1h-1zM20 28h2v1h-2zM24 28h1v1h-1zM26 28h1v1h-1zM28 28h1v1h-1zM30 28h2v1h-2zM34 28h1v1h-1zM2 29h1v1h-1zM8 29h1v1h-1zM10 29h2v1h-2zM13 29h2v1h-2zM16 29h1v1h-1zM19 29h2v1h-2zM22 29h1v1h-1zM25 29h2v1h-2zM30 29h2v1h-2zM33 29h2v1h-2zM2 30h1v1h-1zM4 30h3v1h-3zM8 30h1v1h-1zM10 30h2v1h-2zM14 30h2v1h-2zM17 30h2v1h-2zM25 30h6v1h-6zM32 30h1v1h-1zM2 31h1v1h-1zM4 31h3v1h-3zM8 31h1v1h-1zM10 31h2v1h-2zM15 31h4v1h-4zM20 31h2v1h-2zM23 31h2v1h-2zM28 31h1v1h-1zM30 31h1v1h-1zM33 31h2v1h-2zM2 32h1v1h-1zM4 32h3v1h-3zM8 32h1v1h-1zM11 32h1v1h-1zM13 32h1v1h-1zM16 32h1v1h-1zM19 32h2v1h-2zM22 32h2v1h-2zM25 32h1v1h-1zM28 32h1v1h-1zM30 32h1v1h-1zM32 32h3v1h-3zM2 33h1v1h-1zM8 33h1v1h-1zM10 33h1v1h-1zM12 33h1v1h-1zM17 33h2v1h-2zM21 33h1v1h-1zM23 33h4v1h-4zM29 33h1v1h-1zM2 34h7v1h-7zM14 34h1v1h-1zM21 34h1v1h-1zM25 34h1v1h-1zM30 34h1v1h-1z"></path></svg>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<span id="ts-key-label-expired" style="font-size: 12px; font-weight: 600; color: #4A5363">찍을 수 없으면 이 키를 입력하세요</span>
|
||||
<code aria-labelledby="ts-key-label-expired" style="display: block; box-sizing: border-box; padding: 6px 8px; border: 1px solid #E6E8EC; border-radius: 6px; background: #F8F9FB; font-family: Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 12px; line-height: 1.6; color: #171C26; white-space: nowrap">R4WN 6HMQ T2XB ZK7D<br>PL3F JC5Y VQ2G NEA6</code>
|
||||
<button type="button" class="line-btn" aria-label="키 복사" style="align-self: flex-start; 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>
|
||||
</div>
|
||||
<span style="font-size: 12px; color: #667085">앱에는 「ARA SYSTEM (ara.kim@arasystem.it.kr)」로 저장됩니다.</span>
|
||||
</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="ts-code-expired" style="font-size: 12.5px; font-weight: 600; color: #344054">앱에 표시된 6자리 코드</label>
|
||||
<input id="ts-code-expired" 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>
|
||||
</li>
|
||||
</ol>
|
||||
<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">인증 앱을 쓸 수 없나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">10분이 지났거나 다른 곳에서 켜기를 다시 시작했을 때(AUTH_008)입니다. 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>
|
||||
<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">
|
||||
<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: 8px">
|
||||
<span style="font-weight: 600">인증 앱으로 QR 코드를 찍어 주세요</span>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">인증 앱에서 [+] → 「QR 코드 스캔」을 고릅니다. 앱이 없으면 Google Authenticator · Microsoft Authenticator 를 먼저 설치해 주세요.</p>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px">
|
||||
<div style="flex: 0 0 auto; padding: 6px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FFFFFF">
|
||||
<svg role="img" aria-label="인증 앱에 등록할 QR 코드" width="148" height="148" viewBox="0 0 37 37" shape-rendering="crispEdges" style="display: block"><path fill="#171C26" d="M2 2h7v1h-7zM11 2h2v1h-2zM16 2h2v1h-2zM19 2h2v1h-2zM22 2h1v1h-1zM28 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM14 3h2v1h-2zM18 3h1v1h-1zM20 3h1v1h-1zM22 3h1v1h-1zM25 3h2v1h-2zM28 3h1v1h-1zM34 3h1v1h-1zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM12 4h2v1h-2zM19 4h1v1h-1zM23 4h3v1h-3zM28 4h1v1h-1zM30 4h3v1h-3zM34 4h1v1h-1zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h1v1h-1zM10 5h2v1h-2zM17 5h2v1h-2zM21 5h1v1h-1zM26 5h1v1h-1zM28 5h1v1h-1zM30 5h3v1h-3zM34 5h1v1h-1zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h1v1h-1zM13 6h1v1h-1zM15 6h1v1h-1zM17 6h1v1h-1zM21 6h4v1h-4zM26 6h1v1h-1zM28 6h1v1h-1zM30 6h3v1h-3zM34 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM12 7h2v1h-2zM15 7h1v1h-1zM20 7h1v1h-1zM22 7h2v1h-2zM28 7h1v1h-1zM34 7h1v1h-1zM2 8h7v1h-7zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h1v1h-1zM22 8h1v1h-1zM24 8h1v1h-1zM26 8h1v1h-1zM28 8h7v1h-7zM10 9h4v1h-4zM16 9h1v1h-1zM18 9h1v1h-1zM21 9h1v1h-1zM24 9h2v1h-2zM3 10h1v1h-1zM5 10h1v1h-1zM7 10h2v1h-2zM14 10h4v1h-4zM21 10h5v1h-5zM29 10h2v1h-2zM32 10h1v1h-1zM34 10h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM6 11h2v1h-2zM10 11h6v1h-6zM20 11h2v1h-2zM24 11h7v1h-7zM32 11h1v1h-1zM34 11h1v1h-1zM3 12h2v1h-2zM6 12h1v1h-1zM8 12h2v1h-2zM11 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM19 12h2v1h-2zM25 12h2v1h-2zM31 12h2v1h-2zM7 13h1v1h-1zM9 13h1v1h-1zM12 13h2v1h-2zM17 13h1v1h-1zM19 13h2v1h-2zM23 13h2v1h-2zM27 13h2v1h-2zM30 13h2v1h-2zM2 14h2v1h-2zM5 14h1v1h-1zM7 14h2v1h-2zM10 14h2v1h-2zM13 14h2v1h-2zM16 14h2v1h-2zM19 14h1v1h-1zM21 14h3v1h-3zM25 14h2v1h-2zM28 14h1v1h-1zM31 14h1v1h-1zM33 14h2v1h-2zM2 15h6v1h-6zM9 15h1v1h-1zM13 15h1v1h-1zM17 15h2v1h-2zM21 15h4v1h-4zM26 15h1v1h-1zM28 15h1v1h-1zM30 15h3v1h-3zM34 15h1v1h-1zM3 16h1v1h-1zM5 16h1v1h-1zM7 16h5v1h-5zM14 16h2v1h-2zM18 16h1v1h-1zM20 16h1v1h-1zM22 16h1v1h-1zM25 16h2v1h-2zM28 16h1v1h-1zM30 16h3v1h-3zM4 17h1v1h-1zM6 17h2v1h-2zM10 17h4v1h-4zM16 17h1v1h-1zM18 17h1v1h-1zM20 17h1v1h-1zM22 17h2v1h-2zM27 17h2v1h-2zM30 17h2v1h-2zM34 17h1v1h-1zM4 18h3v1h-3zM8 18h1v1h-1zM12 18h1v1h-1zM14 18h1v1h-1zM16 18h4v1h-4zM21 18h4v1h-4zM27 18h3v1h-3zM32 18h1v1h-1zM34 18h1v1h-1zM3 19h2v1h-2zM9 19h2v1h-2zM14 19h2v1h-2zM17 19h3v1h-3zM22 19h3v1h-3zM26 19h1v1h-1zM28 19h1v1h-1zM30 19h1v1h-1zM32 19h1v1h-1zM3 20h10v1h-10zM17 20h2v1h-2zM20 20h1v1h-1zM22 20h1v1h-1zM24 20h1v1h-1zM26 20h2v1h-2zM29 20h1v1h-1zM33 20h1v1h-1zM3 21h1v1h-1zM6 21h1v1h-1zM9 21h1v1h-1zM11 21h2v1h-2zM19 21h1v1h-1zM21 21h2v1h-2zM26 21h2v1h-2zM29 21h4v1h-4zM34 21h1v1h-1zM2 22h1v1h-1zM6 22h1v1h-1zM8 22h3v1h-3zM15 22h1v1h-1zM17 22h2v1h-2zM21 22h1v1h-1zM24 22h3v1h-3zM30 22h1v1h-1zM34 22h1v1h-1zM9 23h2v1h-2zM12 23h1v1h-1zM15 23h2v1h-2zM27 23h2v1h-2zM30 23h2v1h-2zM2 24h4v1h-4zM7 24h5v1h-5zM13 24h2v1h-2zM18 24h1v1h-1zM20 24h1v1h-1zM23 24h1v1h-1zM26 24h1v1h-1zM29 24h3v1h-3zM4 25h2v1h-2zM7 25h1v1h-1zM12 25h1v1h-1zM15 25h2v1h-2zM19 25h3v1h-3zM23 25h1v1h-1zM28 25h2v1h-2zM32 25h1v1h-1zM3 26h1v1h-1zM6 26h1v1h-1zM8 26h2v1h-2zM12 26h1v1h-1zM14 26h1v1h-1zM16 26h3v1h-3zM24 26h8v1h-8zM33 26h2v1h-2zM10 27h2v1h-2zM13 27h1v1h-1zM15 27h3v1h-3zM20 27h1v1h-1zM23 27h1v1h-1zM25 27h2v1h-2zM30 27h4v1h-4zM2 28h7v1h-7zM10 28h4v1h-4zM18 28h1v1h-1zM21 28h1v1h-1zM23 28h1v1h-1zM26 28h1v1h-1zM28 28h1v1h-1zM30 28h3v1h-3zM34 28h1v1h-1zM2 29h1v1h-1zM8 29h1v1h-1zM12 29h1v1h-1zM14 29h2v1h-2zM17 29h2v1h-2zM23 29h2v1h-2zM26 29h1v1h-1zM30 29h3v1h-3zM34 29h1v1h-1zM2 30h1v1h-1zM4 30h3v1h-3zM8 30h1v1h-1zM13 30h3v1h-3zM21 30h1v1h-1zM24 30h1v1h-1zM26 30h5v1h-5zM32 30h1v1h-1zM2 31h1v1h-1zM4 31h3v1h-3zM8 31h1v1h-1zM11 31h1v1h-1zM13 31h1v1h-1zM15 31h4v1h-4zM22 31h2v1h-2zM28 31h3v1h-3zM32 31h3v1h-3zM2 32h1v1h-1zM4 32h3v1h-3zM8 32h1v1h-1zM10 32h2v1h-2zM14 32h1v1h-1zM16 32h4v1h-4zM21 32h3v1h-3zM28 32h1v1h-1zM31 32h4v1h-4zM2 33h1v1h-1zM8 33h1v1h-1zM14 33h1v1h-1zM19 33h1v1h-1zM22 33h1v1h-1zM26 33h1v1h-1zM28 33h1v1h-1zM30 33h1v1h-1zM33 33h2v1h-2zM2 34h7v1h-7zM10 34h2v1h-2zM13 34h3v1h-3zM18 34h1v1h-1zM20 34h3v1h-3zM25 34h1v1h-1zM28 34h1v1h-1zM31 34h1v1h-1zM33 34h2v1h-2z"></path></svg>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<span id="ts-key-label-busy" style="font-size: 12px; font-weight: 600; color: #4A5363">찍을 수 없으면 이 키를 입력하세요</span>
|
||||
<code aria-labelledby="ts-key-label-busy" style="display: block; box-sizing: border-box; padding: 6px 8px; border: 1px solid #E6E8EC; border-radius: 6px; background: #F8F9FB; font-family: Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 12px; line-height: 1.6; color: #171C26; white-space: nowrap">K7QF 2M4X HB6R TZ3N<br>PW5C YL7D JQ2V MGAS</code>
|
||||
<button type="button" class="line-btn" aria-label="키 복사" style="align-self: flex-start; 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>
|
||||
</div>
|
||||
<span style="font-size: 12px; color: #667085">앱에는 「ARA SYSTEM (ara.kim@arasystem.it.kr)」로 저장됩니다.</span>
|
||||
</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="ts-code-busy" style="font-size: 12.5px; font-weight: 600; color: #344054">앱에 표시된 6자리 코드</label>
|
||||
<input id="ts-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>
|
||||
</li>
|
||||
</ol>
|
||||
<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">인증 앱을 쓸 수 없나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">로그인 단추와 같은 모양입니다(「켜는 중…」 · aria-busy). 메일 서버에 등록하느라 길게는 30초 걸립니다(12단계와 같은 한도).</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); 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">
|
||||
<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: 8px">
|
||||
<span style="font-weight: 600">인증 앱으로 QR 코드를 찍어 주세요</span>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">인증 앱에서 [+] → 「QR 코드 스캔」을 고릅니다. 앱이 없으면 Google Authenticator · Microsoft Authenticator 를 먼저 설치해 주세요.</p>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px">
|
||||
<div style="flex: 0 0 auto; padding: 6px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FFFFFF">
|
||||
<svg role="img" aria-label="인증 앱에 등록할 QR 코드" width="148" height="148" viewBox="0 0 37 37" shape-rendering="crispEdges" style="display: block"><path fill="#171C26" d="M2 2h7v1h-7zM11 2h2v1h-2zM16 2h2v1h-2zM19 2h2v1h-2zM22 2h1v1h-1zM28 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM14 3h2v1h-2zM18 3h1v1h-1zM20 3h1v1h-1zM22 3h1v1h-1zM25 3h2v1h-2zM28 3h1v1h-1zM34 3h1v1h-1zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM12 4h2v1h-2zM19 4h1v1h-1zM23 4h3v1h-3zM28 4h1v1h-1zM30 4h3v1h-3zM34 4h1v1h-1zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h1v1h-1zM10 5h2v1h-2zM17 5h2v1h-2zM21 5h1v1h-1zM26 5h1v1h-1zM28 5h1v1h-1zM30 5h3v1h-3zM34 5h1v1h-1zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h1v1h-1zM13 6h1v1h-1zM15 6h1v1h-1zM17 6h1v1h-1zM21 6h4v1h-4zM26 6h1v1h-1zM28 6h1v1h-1zM30 6h3v1h-3zM34 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM12 7h2v1h-2zM15 7h1v1h-1zM20 7h1v1h-1zM22 7h2v1h-2zM28 7h1v1h-1zM34 7h1v1h-1zM2 8h7v1h-7zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h1v1h-1zM22 8h1v1h-1zM24 8h1v1h-1zM26 8h1v1h-1zM28 8h7v1h-7zM10 9h4v1h-4zM16 9h1v1h-1zM18 9h1v1h-1zM21 9h1v1h-1zM24 9h2v1h-2zM3 10h1v1h-1zM5 10h1v1h-1zM7 10h2v1h-2zM14 10h4v1h-4zM21 10h5v1h-5zM29 10h2v1h-2zM32 10h1v1h-1zM34 10h1v1h-1zM2 11h1v1h-1zM4 11h1v1h-1zM6 11h2v1h-2zM10 11h6v1h-6zM20 11h2v1h-2zM24 11h7v1h-7zM32 11h1v1h-1zM34 11h1v1h-1zM3 12h2v1h-2zM6 12h1v1h-1zM8 12h2v1h-2zM11 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM19 12h2v1h-2zM25 12h2v1h-2zM31 12h2v1h-2zM7 13h1v1h-1zM9 13h1v1h-1zM12 13h2v1h-2zM17 13h1v1h-1zM19 13h2v1h-2zM23 13h2v1h-2zM27 13h2v1h-2zM30 13h2v1h-2zM2 14h2v1h-2zM5 14h1v1h-1zM7 14h2v1h-2zM10 14h2v1h-2zM13 14h2v1h-2zM16 14h2v1h-2zM19 14h1v1h-1zM21 14h3v1h-3zM25 14h2v1h-2zM28 14h1v1h-1zM31 14h1v1h-1zM33 14h2v1h-2zM2 15h6v1h-6zM9 15h1v1h-1zM13 15h1v1h-1zM17 15h2v1h-2zM21 15h4v1h-4zM26 15h1v1h-1zM28 15h1v1h-1zM30 15h3v1h-3zM34 15h1v1h-1zM3 16h1v1h-1zM5 16h1v1h-1zM7 16h5v1h-5zM14 16h2v1h-2zM18 16h1v1h-1zM20 16h1v1h-1zM22 16h1v1h-1zM25 16h2v1h-2zM28 16h1v1h-1zM30 16h3v1h-3zM4 17h1v1h-1zM6 17h2v1h-2zM10 17h4v1h-4zM16 17h1v1h-1zM18 17h1v1h-1zM20 17h1v1h-1zM22 17h2v1h-2zM27 17h2v1h-2zM30 17h2v1h-2zM34 17h1v1h-1zM4 18h3v1h-3zM8 18h1v1h-1zM12 18h1v1h-1zM14 18h1v1h-1zM16 18h4v1h-4zM21 18h4v1h-4zM27 18h3v1h-3zM32 18h1v1h-1zM34 18h1v1h-1zM3 19h2v1h-2zM9 19h2v1h-2zM14 19h2v1h-2zM17 19h3v1h-3zM22 19h3v1h-3zM26 19h1v1h-1zM28 19h1v1h-1zM30 19h1v1h-1zM32 19h1v1h-1zM3 20h10v1h-10zM17 20h2v1h-2zM20 20h1v1h-1zM22 20h1v1h-1zM24 20h1v1h-1zM26 20h2v1h-2zM29 20h1v1h-1zM33 20h1v1h-1zM3 21h1v1h-1zM6 21h1v1h-1zM9 21h1v1h-1zM11 21h2v1h-2zM19 21h1v1h-1zM21 21h2v1h-2zM26 21h2v1h-2zM29 21h4v1h-4zM34 21h1v1h-1zM2 22h1v1h-1zM6 22h1v1h-1zM8 22h3v1h-3zM15 22h1v1h-1zM17 22h2v1h-2zM21 22h1v1h-1zM24 22h3v1h-3zM30 22h1v1h-1zM34 22h1v1h-1zM9 23h2v1h-2zM12 23h1v1h-1zM15 23h2v1h-2zM27 23h2v1h-2zM30 23h2v1h-2zM2 24h4v1h-4zM7 24h5v1h-5zM13 24h2v1h-2zM18 24h1v1h-1zM20 24h1v1h-1zM23 24h1v1h-1zM26 24h1v1h-1zM29 24h3v1h-3zM4 25h2v1h-2zM7 25h1v1h-1zM12 25h1v1h-1zM15 25h2v1h-2zM19 25h3v1h-3zM23 25h1v1h-1zM28 25h2v1h-2zM32 25h1v1h-1zM3 26h1v1h-1zM6 26h1v1h-1zM8 26h2v1h-2zM12 26h1v1h-1zM14 26h1v1h-1zM16 26h3v1h-3zM24 26h8v1h-8zM33 26h2v1h-2zM10 27h2v1h-2zM13 27h1v1h-1zM15 27h3v1h-3zM20 27h1v1h-1zM23 27h1v1h-1zM25 27h2v1h-2zM30 27h4v1h-4zM2 28h7v1h-7zM10 28h4v1h-4zM18 28h1v1h-1zM21 28h1v1h-1zM23 28h1v1h-1zM26 28h1v1h-1zM28 28h1v1h-1zM30 28h3v1h-3zM34 28h1v1h-1zM2 29h1v1h-1zM8 29h1v1h-1zM12 29h1v1h-1zM14 29h2v1h-2zM17 29h2v1h-2zM23 29h2v1h-2zM26 29h1v1h-1zM30 29h3v1h-3zM34 29h1v1h-1zM2 30h1v1h-1zM4 30h3v1h-3zM8 30h1v1h-1zM13 30h3v1h-3zM21 30h1v1h-1zM24 30h1v1h-1zM26 30h5v1h-5zM32 30h1v1h-1zM2 31h1v1h-1zM4 31h3v1h-3zM8 31h1v1h-1zM11 31h1v1h-1zM13 31h1v1h-1zM15 31h4v1h-4zM22 31h2v1h-2zM28 31h3v1h-3zM32 31h3v1h-3zM2 32h1v1h-1zM4 32h3v1h-3zM8 32h1v1h-1zM10 32h2v1h-2zM14 32h1v1h-1zM16 32h4v1h-4zM21 32h3v1h-3zM28 32h1v1h-1zM31 32h4v1h-4zM2 33h1v1h-1zM8 33h1v1h-1zM14 33h1v1h-1zM19 33h1v1h-1zM22 33h1v1h-1zM26 33h1v1h-1zM28 33h1v1h-1zM30 33h1v1h-1zM33 33h2v1h-2zM2 34h7v1h-7zM10 34h2v1h-2zM13 34h3v1h-3zM18 34h1v1h-1zM20 34h3v1h-3zM25 34h1v1h-1zM28 34h1v1h-1zM31 34h1v1h-1zM33 34h2v1h-2z"></path></svg>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px">
|
||||
<span id="ts-key-label-refresh" style="font-size: 12px; font-weight: 600; color: #4A5363">찍을 수 없으면 이 키를 입력하세요</span>
|
||||
<code aria-labelledby="ts-key-label-refresh" style="display: block; box-sizing: border-box; padding: 6px 8px; border: 1px solid #E6E8EC; border-radius: 6px; background: #F8F9FB; font-family: Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 12px; line-height: 1.6; color: #171C26; white-space: nowrap">K7QF 2M4X HB6R TZ3N<br>PW5C YL7D JQ2V MGAS</code>
|
||||
<button type="button" class="line-btn" aria-label="키 복사" style="align-self: flex-start; 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>
|
||||
</div>
|
||||
<span style="font-size: 12px; color: #667085">앱에는 「ARA SYSTEM (ara.kim@arasystem.it.kr)」로 저장됩니다.</span>
|
||||
</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="ts-code-refresh" style="font-size: 12.5px; font-weight: 600; color: #344054">앱에 표시된 6자리 코드</label>
|
||||
<input id="ts-code-refresh" 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>
|
||||
</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="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="ts-pw-refresh" style="font-size: 12.5px; font-weight: 600; color: #344054">지금 비밀번호</label>
|
||||
<div class="pw-box" style="display: flex; align-items: center; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
|
||||
<input id="ts-pw-refresh" class="pw-input" type="password" autocomplete="current-password" value="" aria-describedby="ts-pw-refresh-hint" style="font-size: 14px">
|
||||
<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="ts-pw-refresh-hint" style="margin: 0; font-size: 12.5px; color: #667085">새로고침해서 다시 넣어야 합니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
<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">인증 앱을 쓸 수 없나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">새로고침하면 키도 새로 만듭니다 — 앞에서 찍어 둔 항목이 앱에 있으면 지우고 다시 찍습니다. 비밀번호가 틀리면 그 칸 아래 「지금 비밀번호가 올바르지 않습니다.」(AUTH_005).</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">받은편지함으로 · 알림에 [앱 비밀번호 만들기](10초)</p>
|
||||
</div>
|
||||
<div style="max-width: 420px">
|
||||
<div role="status" style="display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 6px 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>
|
||||
<button type="button" class="toast-action" style="flex: 0 0 auto; min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">앱 비밀번호 만들기</button>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">제한이 풀리면 받은편지함으로 갑니다(가려던 주소가 있으면 그곳). 도착하면 이 알림 — 단추가 있는 알림이라 10초, 마우스 · 초점이 있는 동안은 멈춥니다. [앱 비밀번호 만들기] → 설정 › 앱 비밀번호.</p>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">Outlook · 휴대폰 메일 앱을 웹메일 비밀번호로 연결해 둔 직원은 다음에 다시 연결할 때 막힙니다 — 그래서 켠 바로 뒤에 알립니다.</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>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>누가 오나: 회사가 2단계 인증을 필수로 정한 날(시작일)부터 아직 켜지 않은 직원 — 예외 주소는 빼고. 비밀번호가 맞으면 위 화면으로 옵니다. 켜기 전에는 메일 · 주소록 · 설정을 열 수 없습니다(AUTH_010).</li>
|
||||
<li>새 비밀번호 정하기가 함께 걸린 직원(입사)은 그것 먼저 — 새 비밀번호 → 이 단계.</li>
|
||||
<li>지금 비밀번호는 로그인 때 넣은 것(방금 새 비밀번호를 정했으면 그것)을 화면 메모리에서 씁니다 — 12단계 켜기 창의 ③ 을 묻지 않습니다.</li>
|
||||
<li>키는 이 화면을 열 때마다 새로 만들고 10분 안에 켭니다 — 지나면 위쪽 상자와 새 키. 켜지 않고 떠나면 그 키는 버립니다.</li>
|
||||
<li>코드 틀림 · 한도는 12단계 그대로입니다(같은 주소 15분 5회 · 하루 20회 — 넘으면 「요청이 너무 많습니다」 위쪽 상자).</li>
|
||||
<li>[다른 계정으로 로그인] → 로그아웃하고 처음 로그인 화면으로.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-bottom: -10px; padding-top: 6px; border-top: 1px solid #E6E8EC">
|
||||
<h2 style="margin: 10px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em">유예 기간 — 시작일 전</h2>
|
||||
<span style="font-size: 12.5px; color: #667085">로그인은 그대로 · 메일 화면 위 노란 줄 · 설정 › 2단계 인증도 같은 안내</span>
|
||||
</div>
|
||||
|
||||
<div role="region" aria-label="화면 — 메일함 위 안내 줄 (2단계 인증 유예 기간)" style="height: 470px; box-sizing: border-box; display: flex; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px; 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" aria-current="page" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; font-size: 11px; text-decoration: none; background: #155A64; color: #FFFFFF; font-weight: 600">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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" 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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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 role="region" aria-label="2단계 인증 안내" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 2px 6px 2px 20px; border-bottom: 1px solid #F0D9A8; background: #FFF7E6; color: #7A5200">
|
||||
<svg width="15" height="15" 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"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0"><strong style="font-weight: 600">11월 30일까지 2단계 인증을 켜 주세요</strong> — 그 뒤에는 켜야 로그인할 수 있습니다.</span>
|
||||
<a href="SettingsTwoFactor.dc.html" class="notice-btn" style="flex: 0 0 auto; 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 style="flex: 1 1 auto; display: flex; align-items: stretch">
|
||||
<nav aria-label="메일함" style="flex: 1 1 208px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
|
||||
<a href="Compose.dc.html" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600; text-decoration: none">
|
||||
<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"><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>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: #E3F2F3">
|
||||
<button type="button" aria-current="page" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #0A5F67; font: inherit; font-weight: 600; text-align: left; 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"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span>
|
||||
<span style="font-size: 12px; font-weight: 600; color: #0A5F67; font-variant-numeric: tabular-nums">2</span>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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"><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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">보낸편지함</span>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">임시보관함</span>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">스팸메일함</span>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">휴지통</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: 12px 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 style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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="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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">프로젝트</span>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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="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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">거래처</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 2px; border-top: 1px solid #E6E8EC">
|
||||
<div style="display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #667085">
|
||||
<span>메일함 사용량</span>
|
||||
<span style="font-variant-numeric: tabular-nums">0.9 / 5 GB</span>
|
||||
</div>
|
||||
<div style="height: 4px; border-radius: 2px; background: #E4E7EC">
|
||||
<div style="width: 18%; height: 4px; border-radius: 2px; background: #0E7C86"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main style="flex: 999 1 560px; min-width: 0; display: flex; align-items: stretch">
|
||||
<section aria-labelledby="gb-list-title" style="flex: 1 1 384px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; border-right: 1px solid #E6E8EC">
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #E6E8EC">
|
||||
<h2 id="gb-list-title" style="margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h2>
|
||||
<span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">전체 128 · 안 읽음 2</span>
|
||||
<div style="margin-left: auto; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF">
|
||||
<button type="button" aria-pressed="true" aria-label="분할 보기" style="display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: #E3F2F3; color: #0A5F67; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2" ry="2"></rect><line x1="10" y1="4" x2="10" y2="20"></line></svg>
|
||||
<span>분할</span>
|
||||
</button>
|
||||
<a href="MainList.dc.html" aria-label="목록 보기" style="display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border-radius: 6px; color: #344054; font-size: 12px; font-weight: 500; text-decoration: none">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="9" y1="6" x2="20" y2="6"></line><line x1="9" y1="12" x2="20" y2="12"></line><line x1="9" y1="18" x2="20" y2="18"></line><line x1="4" y1="6" x2="4.01" y2="6"></line><line x1="4" y1="12" x2="4.01" y2="12"></line><line x1="4" y1="18" x2="4.01" y2="18"></line></svg>
|
||||
<span>목록</span>
|
||||
</a>
|
||||
</div>
|
||||
<button type="button" aria-label="새로고침" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #4A5363; 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"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<ul aria-label="받은편지함 메일 목록" style="list-style: none; margin: 0; padding: 0">
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: #171C26">이도윤</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오전 10:42</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #171C26">Re: 메일 서버 이전 일정 공유</span>
|
||||
<svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: #171C26">인사팀</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오전 9:15</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #171C26">[인사팀] 11월 연차 사용 계획 제출 안내</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">박준호</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">어제</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">주간 인프라 점검 결과 (10/20~10/24)</span>
|
||||
<svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시 해제" aria-pressed="true" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #B7791F; cursor: pointer">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="#B7791F" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">(주)한빛솔루션</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">어제</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">서버 증설 견적서 송부드립니다</span>
|
||||
<svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div style="flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center">
|
||||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" 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>
|
||||
<p style="margin: 6px 0 0; font-size: 14px; font-weight: 600">메일을 선택하세요</p>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">목록에서 메일을 고르면 내용이 여기에 표시됩니다.</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</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">2단계 인증</h1>
|
||||
<p style="margin: 0; color: #4A5363">로그인할 때 비밀번호와 함께 휴대폰 인증 앱의 코드를 확인합니다. 비밀번호가 새어 나가도 휴대폰이 없으면 로그인할 수 없습니다.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; max-width: 700px; 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"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></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">11월 30일까지 2단계 인증을 켜 주세요</span>
|
||||
<span>회사 정책에 따라 그 뒤에는 2단계 인증을 켜야 로그인할 수 있습니다.</span>
|
||||
</div>
|
||||
</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: #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>
|
||||
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">그 아래 경고(메일 프로그램은 앱 비밀번호로) · 켜는 차례 · 켜기 창은 12단계 그대로입니다.</p>
|
||||
</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>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">끄기 단추 대신 글 · 휴대폰 바꾸기 안내가 바뀐다</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 260px; display: flex; flex-direction: column; gap: 2px">
|
||||
<span style="font-size: 14px; font-weight: 700; color: #067647">켜짐 — 2026년 11월 12일부터</span>
|
||||
<span style="font-size: 12.5px; color: #4A5363">로그인할 때마다 비밀번호와 인증 앱의 코드를 확인합니다.</span>
|
||||
</div>
|
||||
<span style="font-size: 12.5px; color: #667085">회사 정책에 따라 끌 수 없습니다</span>
|
||||
</div>
|
||||
<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>휴대폰을 바꿀 때는 관리자에게 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>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">필수인 직원은 끌 수 없습니다(서버도 VAL_001 로 거절). 휴대폰을 바꾸면 관리자가 운영 도구의 「2단계 해제」를 하고, 직원은 다음 로그인 때 위 켜기 단계로 새 휴대폰을 등록합니다. 직원이 직접 하는 휴대폰 바꾸기는 처음 판에서 미뤘습니다.</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>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>시작일 전(유예)에는 로그인이 그대로이고 메일 화면 위에 노란 줄이 보입니다. 날짜는 시작일 전날입니다 — 시작일이 12월 1일이면 「11월 30일까지」.</li>
|
||||
<li>[지금 켜기] → 설정 › 2단계 인증. 닫기 단추는 두지 않습니다 — 줄은 켜야 사라집니다.</li>
|
||||
<li>줄의 높이 40 · 단추 36 은 기존 밀도 예외(안내 줄 · 안내 줄 단추)를 그대로 씁니다.</li>
|
||||
<li>설정 › 2단계 인증도 머리 아래에 같은 안내를 보입니다(GET /api/two-factor 의 isRequired · deadline).</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":4290}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,881 @@
|
||||
<!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}
|
||||
.danger{background:transparent;color:#B42318}
|
||||
.danger:hover{background:#FEF3F2;color:#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}
|
||||
.notice-btn{background:#FFFFFF;color:#7A5200;border:1px solid #F0D9A8}
|
||||
.notice-btn:hover{background:#FFF1D6}
|
||||
.tool{background:transparent;color:#344054}
|
||||
.tool:hover{background:#F2F4F7;color:#171C26}
|
||||
.toast-action{background:transparent;color:#9ED6DB}
|
||||
.toast-action:hover{background:rgba(255,255,255,0.1)}
|
||||
.menu-link{color:#344054}
|
||||
.menu-link:hover{background:#EEF0F3}
|
||||
.acc{background:transparent;color:#171C26}
|
||||
.acc:hover{background:#F8F9FB}
|
||||
.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}
|
||||
.ml-grid{display:grid;grid-template-columns:32px 168px minmax(0,1fr) 84px 64px;column-gap:12px;align-items:center}
|
||||
.ml-row:hover{background:#F3F8F8}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 3780px; 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: 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" aria-current="page" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; font-size: 11px; text-decoration: none; background: #155A64; color: #FFFFFF; font-weight: 600">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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" 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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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: 14px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
|
||||
<a href="Compose.dc.html" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600; text-decoration: none">
|
||||
<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"><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>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px">
|
||||
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: #E3F2F3">
|
||||
<button type="button" aria-current="page" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #0A5F67; font: inherit; font-weight: 600; text-align: left; 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"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span>
|
||||
<span style="font-size: 12px; font-weight: 600; color: #0A5F67; font-variant-numeric: tabular-nums">2</span>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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"><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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">보낸편지함</span>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">임시보관함</span>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">스팸메일함</span>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">휴지통</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: 12px 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 style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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="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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">프로젝트</span>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: center; border-radius: 7px; background: transparent">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; background: transparent; color: #344054; font: inherit; font-weight: 500; text-align: left; 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="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 style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">거래처</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 2px; border-top: 1px solid #E6E8EC">
|
||||
<div style="display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #667085">
|
||||
<span>메일함 사용량</span>
|
||||
<span style="font-variant-numeric: tabular-nums">0.9 / 5 GB</span>
|
||||
</div>
|
||||
<div style="height: 4px; border-radius: 2px; background: #E4E7EC">
|
||||
<div style="width: 18%; height: 4px; border-radius: 2px; background: #0E7C86"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main style="flex: 999 1 560px; min-width: 0; display: flex; flex-wrap: wrap; align-items: stretch">
|
||||
<section aria-labelledby="mn-list-title" style="flex: 1 1 384px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; border-right: 1px solid #E6E8EC">
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #E6E8EC">
|
||||
<h2 id="mn-list-title" style="margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h2>
|
||||
<span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">전체 132 · 안 읽음 2</span>
|
||||
<div style="margin-left: auto; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF">
|
||||
<button type="button" aria-pressed="true" aria-label="분할 보기" style="display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: #E3F2F3; color: #0A5F67; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2" ry="2"></rect><line x1="10" y1="4" x2="10" y2="20"></line></svg>
|
||||
<span>분할</span>
|
||||
</button>
|
||||
<a href="MainList.dc.html" aria-label="목록 보기" style="display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border-radius: 6px; color: #344054; font-size: 12px; font-weight: 500; text-decoration: none">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="9" y1="6" x2="20" y2="6"></line><line x1="9" y1="12" x2="20" y2="12"></line><line x1="9" y1="18" x2="20" y2="18"></line><line x1="4" y1="6" x2="4.01" y2="6"></line><line x1="4" y1="12" x2="4.01" y2="12"></line><line x1="4" y1="18" x2="4.01" y2="18"></line></svg>
|
||||
<span>목록</span>
|
||||
</a>
|
||||
</div>
|
||||
<button type="button" aria-label="새로고침" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #4A5363; 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"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<ul aria-label="받은편지함 메일 목록" style="list-style: none; margin: 0; padding: 0">
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: #171C26">ARA SYSTEM</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오후 4:02</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #171C26">올린 대용량 파일에서 위험한 내용이 발견되었습니다</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #E3F2F3">
|
||||
<button type="button" aria-current="true" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">ARA SYSTEM</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">오후 3:20</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">관리자가 비밀번호를 재설정했습니다</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: #171C26">이도윤</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오전 10:42</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #171C26">Re: 메일 서버 이전 일정 공유</span>
|
||||
<svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">인사팀</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">오전 9:15</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">[인사팀] 11월 연차 사용 계획 제출 안내</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">박준호</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">어제</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">주간 인프라 점검 결과 (10/20~10/24)</span>
|
||||
<svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시 해제" aria-pressed="true" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #B7791F; cursor: pointer">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="#B7791F" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">ARA SYSTEM</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">10월 27일</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">관리자가 2단계 인증을 껐습니다</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">(주)한빛솔루션</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">10월 26일</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">서버 증설 견적서 송부드립니다</span>
|
||||
<svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">보안팀</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">10월 24일</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">[공지] 하반기 정보보안 교육 이수 요청</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div style="flex: 999 1 480px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column">
|
||||
<article aria-labelledby="mn-subject-reset" style="display: flex; flex-direction: column">
|
||||
<div style="border-bottom: 1px solid #E6E8EC">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 52px; max-width: 800px; box-sizing: border-box; padding: 4px 32px 4px 22px">
|
||||
<button type="button" class="tool" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; 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"><polyline points="9 17 4 12 9 7"></polyline><path d="M20 18v-2a4 4 0 0 0-4-4H4"></path></svg><span>답장</span></button>
|
||||
<button type="button" class="tool" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer"><span>전체 답장</span></button>
|
||||
<button type="button" class="tool" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; 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"><polyline points="15 17 20 12 15 7"></polyline><path d="M4 18v-2a4 4 0 0 1 4-4h12"></path></svg><span>전달</span></button>
|
||||
<span aria-hidden="true" style="width: 1px; height: 20px; margin: 0 8px; background: #E6E8EC"></span>
|
||||
<button type="button" class="tool" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; 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"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg><span>스팸 신고</span></button>
|
||||
<button type="button" class="tool" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer; color: #B42318"><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"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg><span>삭제</span></button>
|
||||
<button type="button" class="tool" aria-label="더 보기" aria-haspopup="menu" aria-expanded="false" style="display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 18px; max-width: 800px; box-sizing: border-box; padding: 20px 32px 36px">
|
||||
<h1 id="mn-subject-reset" style="margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">관리자가 비밀번호를 재설정했습니다</h1>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 600">A</span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
|
||||
<span style="font-size: 13.5px; font-weight: 600">ARA SYSTEM</span>
|
||||
<span style="font-size: 12.5px; color: #667085">postmaster@arasystem.it.kr</span>
|
||||
<span style="margin-left: auto; font-size: 12.5px; color: #667085; white-space: nowrap; font-variant-numeric: tabular-nums">2026. 10. 30. (금) 오후 3:20</span>
|
||||
</div>
|
||||
<span style="font-size: 12.5px; color: #4A5363">받는 사람 김아라 <ara.kim@arasystem.it.kr></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width: 680px">
|
||||
<div style="font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.75; color: #1F2733">
|
||||
<p style="margin: 0 0 14px">김아라 님, 관리자가 이 계정의 비밀번호를 임시 비밀번호로 바꿨습니다.</p>
|
||||
<table style="width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 13.5px; line-height: 1.6">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">시각</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">2026년 10월 30일 (금) 오후 3:20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">바뀐 것</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">비밀번호 — 임시 비밀번호로 바뀌었고, 처음 로그인할 때 새 비밀번호를 정합니다</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">로그아웃</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">모든 기기 · 브라우저의 웹메일 로그인을 끊었습니다</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">앱 비밀번호</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">모두 지웠습니다 — 메일 프로그램은 새 앱 비밀번호로 다시 연결합니다</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="margin: 0 0 2px; font-weight: 700">할 일</p>
|
||||
<p style="margin: 0 0 20px">아웃룩 · 휴대폰 메일 앱을 쓰면 메일 프로그램마다 앱 비밀번호가 필요합니다. <strong>웹메일 › 설정 › 계정 › 앱 비밀번호</strong>에서 새로 만들어 주세요.</p>
|
||||
<p style="margin: 0; padding-top: 14px; border-top: 1px solid #EEF0F3; font-size: 13px; color: #4A5363">직접 요청한 일이 아니면 바로 IT 담당에게 알려 주세요.<br>IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</p>
|
||||
<p style="margin: 6px 0 0; font-size: 12px; color: #667085">이 메일은 ARA SYSTEM 이 자동으로 보낸 알림입니다. 회사 보안 알림에는 링크가 없습니다 — 비슷한 메일의 링크는 누르지 마세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</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">알림 · 안내 모음 (13단계)</h1>
|
||||
<p style="margin: 0; font-size: 13.5px; color: #4A5363">위 화면은 받은편지함에 들어온 시스템 알림 메일입니다 — 보낸 사람은 「ARA SYSTEM」이고 목록 · 읽기 화면은 다른 메일과 같습니다. 아래는 나머지 알림 메일 둘, 휴지통 · 스팸메일함의 30일 안내 줄, 로그인 화면의 문의 줄입니다. 2026-10-31 확정.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-bottom: -10px; padding-top: 6px; border-top: 1px solid #E6E8EC">
|
||||
<h2 style="margin: 10px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em">받은편지함 알림 메일</h2>
|
||||
<span style="font-size: 12.5px; color: #667085">운영 도구 · 악성 검사가 보낸다 — 문구가 그대로 메일 본문이 된다</span>
|
||||
</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">관리자가 2단계 인증을 껐습니다</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">운영 도구의 「2단계 해제」 — 휴대폰 분실 처리</p>
|
||||
</div>
|
||||
<div style="border: 1px solid #EEF0F3; border-radius: 10px; overflow: hidden; background: #FFFFFF; padding: 0">
|
||||
<article aria-labelledby="mn-subject-twofactor" style="display: flex; flex-direction: column">
|
||||
<div style="display: flex; flex-direction: column; gap: 18px; max-width: 800px; box-sizing: border-box; padding: 20px 32px 36px">
|
||||
<h1 id="mn-subject-twofactor" style="margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">관리자가 2단계 인증을 껐습니다</h1>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 600">A</span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
|
||||
<span style="font-size: 13.5px; font-weight: 600">ARA SYSTEM</span>
|
||||
<span style="font-size: 12.5px; color: #667085">postmaster@arasystem.it.kr</span>
|
||||
<span style="margin-left: auto; font-size: 12.5px; color: #667085; white-space: nowrap; font-variant-numeric: tabular-nums">2026. 10. 27. (화) 오전 10:05</span>
|
||||
</div>
|
||||
<span style="font-size: 12.5px; color: #4A5363">받는 사람 김아라 <ara.kim@arasystem.it.kr></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width: 680px">
|
||||
<div style="font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.75; color: #1F2733">
|
||||
<p style="margin: 0 0 14px">김아라 님, 휴대폰을 잃어버렸거나 인증 앱을 쓸 수 없다고 알려 주셔서 관리자가 이 계정의 2단계 인증을 껐습니다.</p>
|
||||
<table style="width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 13.5px; line-height: 1.6">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">시각</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">2026년 10월 27일 (화) 오전 10:05</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">바뀐 것</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">2단계 인증 꺼짐 — 지금은 비밀번호만으로 로그인합니다</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">그대로인 것</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">비밀번호 · 앱 비밀번호 · 로그인된 브라우저</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="margin: 0 0 2px; font-weight: 700">할 일</p>
|
||||
<p style="margin: 0 0 20px">새 휴대폰에 인증 앱을 설치한 뒤 <strong>웹메일 › 설정 › 계정 › 2단계 인증</strong>에서 다시 켜 주세요. 회사가 2단계 인증을 필수로 정했다면 다음 로그인 때 켜는 화면이 먼저 나옵니다.</p>
|
||||
<p style="margin: 0; padding-top: 14px; border-top: 1px solid #EEF0F3; font-size: 13px; color: #4A5363">직접 요청한 일이 아니면 바로 IT 담당에게 알려 주세요.<br>IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</p>
|
||||
<p style="margin: 6px 0 0; font-size: 12px; color: #667085">이 메일은 ARA SYSTEM 이 자동으로 보낸 알림입니다. 회사 보안 알림에는 링크가 없습니다 — 비슷한 메일의 링크는 누르지 마세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">그대로인 것을 함께 적어 「무엇이 안 바뀌었나」를 묻지 않게 합니다. 2단계 인증이 필수인 직원은 다음 로그인 때 켜기 단계로 갑니다(보드 「로그인 · 2단계 인증 켜기」).</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="border: 1px solid #EEF0F3; border-radius: 10px; overflow: hidden; background: #FFFFFF; padding: 0">
|
||||
<article aria-labelledby="mn-subject-danger" style="display: flex; flex-direction: column">
|
||||
<div style="display: flex; flex-direction: column; gap: 18px; max-width: 800px; box-sizing: border-box; padding: 20px 32px 36px">
|
||||
<h1 id="mn-subject-danger" style="margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">올린 대용량 파일에서 위험한 내용이 발견되었습니다</h1>
|
||||
<div style="display: flex; align-items: flex-start; gap: 12px">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 600">A</span>
|
||||
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
|
||||
<span style="font-size: 13.5px; font-weight: 600">ARA SYSTEM</span>
|
||||
<span style="font-size: 12.5px; color: #667085">postmaster@arasystem.it.kr</span>
|
||||
<span style="margin-left: auto; font-size: 12.5px; color: #667085; white-space: nowrap; font-variant-numeric: tabular-nums">2026. 10. 30. (금) 오후 4:02</span>
|
||||
</div>
|
||||
<span style="font-size: 12.5px; color: #4A5363">받는 사람 김아라 <ara.kim@arasystem.it.kr></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width: 680px">
|
||||
<div style="font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.75; color: #1F2733">
|
||||
<p style="margin: 0 0 14px">김아라 님, 올린 대용량 파일을 보안 검사했더니 위험한 내용이 발견되어 보내거나 내려받을 수 없게 막았습니다.</p>
|
||||
<table style="width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 13.5px; line-height: 1.6">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">파일</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">견적_요청서.zip</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">크기</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">48.2 MB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">올린 때</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">2026년 10월 30일 (금) 오후 3:58</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">조치</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">이 파일만 막았습니다 — 함께 올린 다른 파일은 그대로 보내고 받을 수 있습니다</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="margin: 0 0 2px; font-weight: 700">할 일</p>
|
||||
<p style="margin: 0 0 20px">직접 만든 파일이 아니면 PC 를 백신으로 검사해 주세요. 다른 곳에서 받은 파일이면 보낸 사람에게도 알려 주세요. 막은 파일은 <strong>웹메일 › 설정 › 메일 › 대용량 첨부</strong>에서 볼 수 있습니다.</p>
|
||||
<p style="margin: 0; padding-top: 14px; border-top: 1px solid #EEF0F3; font-size: 13px; color: #4A5363">판정이 잘못되었다고 생각되면 IT 담당에게 알려 주세요.<br>IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</p>
|
||||
<p style="margin: 6px 0 0; font-size: 12px; color: #667085">이 메일은 ARA SYSTEM 이 자동으로 보낸 알림입니다. 회사 보안 알림에는 링크가 없습니다 — 비슷한 메일의 링크는 누르지 마세요.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">웹메일을 열어 둔 동안 뜨는 빨간 알림(11단계)은 그대로 둡니다 — 이 메일은 그때 열려 있지 않았던 직원도 알게 합니다.</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>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">보낸 사람 「ARA SYSTEM」 · 제목 — 다른 메일과 같은 줄, 따로 표시 없음</p>
|
||||
</div>
|
||||
<div style="border: 1px solid #EEF0F3; border-radius: 10px; overflow: hidden">
|
||||
<div aria-hidden="true" class="ml-grid" style="height: 32px; box-sizing: border-box; padding: 0 8px 0 20px; background: #FBFBFC; border-bottom: 1px solid #E6E8EC; font-size: 12px; font-weight: 600; color: #667085">
|
||||
<span style="display: flex; align-items: center"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
|
||||
<span>보낸 사람</span>
|
||||
<span>제목</span>
|
||||
<span style="text-align: right">날짜</span>
|
||||
<span style="text-align: right">크기</span>
|
||||
</div>
|
||||
<ul aria-label="받은편지함 메일 목록 — 목록 보기" style="list-style: none; margin: 0; padding: 0">
|
||||
<li class="ml-row ml-grid" style="height: 38px; box-sizing: border-box; padding: 0 8px 0 20px; border-bottom: 1px solid #EEF0F3">
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="width: 32px; height: 37px; display: flex; align-items: center; justify-content: flex-start; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: #171C26">ARA SYSTEM</span>
|
||||
<span style="min-width: 0; display: flex; align-items: center; gap: 6px">
|
||||
<a href="#" style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #171C26; text-decoration: none">올린 대용량 파일에서 위험한 내용이 발견되었습니다</a>
|
||||
</span>
|
||||
<span style="text-align: right; white-space: nowrap; font-size: 12px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오후 4:02</span>
|
||||
<span style="text-align: right; white-space: nowrap; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">6 KB</span>
|
||||
</li>
|
||||
<li class="ml-row ml-grid" style="height: 38px; box-sizing: border-box; padding: 0 8px 0 20px; border-bottom: 1px solid #EEF0F3">
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="width: 32px; height: 37px; display: flex; align-items: center; justify-content: flex-start; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">ARA SYSTEM</span>
|
||||
<span style="min-width: 0; display: flex; align-items: center; gap: 6px">
|
||||
<a href="#" style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26; text-decoration: none">관리자가 비밀번호를 재설정했습니다</a>
|
||||
</span>
|
||||
<span style="text-align: right; white-space: nowrap; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">오후 3:20</span>
|
||||
<span style="text-align: right; white-space: nowrap; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">5 KB</span>
|
||||
</li>
|
||||
<li class="ml-row ml-grid" style="height: 38px; box-sizing: border-box; padding: 0 8px 0 20px; border-bottom: 1px solid #EEF0F3">
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="width: 32px; height: 37px; display: flex; align-items: center; justify-content: flex-start; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: #171C26">이도윤</span>
|
||||
<span style="min-width: 0; display: flex; align-items: center; gap: 6px">
|
||||
<a href="#" style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #171C26; text-decoration: none">Re: 메일 서버 이전 일정 공유</a>
|
||||
<svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
|
||||
</span>
|
||||
<span style="text-align: right; white-space: nowrap; font-size: 12px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오전 10:42</span>
|
||||
<span style="text-align: right; white-space: nowrap; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">52 KB</span>
|
||||
</li>
|
||||
<li class="ml-row ml-grid" style="height: 38px; box-sizing: border-box; padding: 0 8px 0 20px; border-bottom: 1px solid #EEF0F3">
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="width: 32px; height: 37px; display: flex; align-items: center; justify-content: flex-start; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">ARA SYSTEM</span>
|
||||
<span style="min-width: 0; display: flex; align-items: center; gap: 6px">
|
||||
<a href="#" style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26; text-decoration: none">관리자가 2단계 인증을 껐습니다</a>
|
||||
</span>
|
||||
<span style="text-align: right; white-space: nowrap; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">10월 27일</span>
|
||||
<span style="text-align: right; white-space: nowrap; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">5 KB</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">분할 보기(위 화면)와 같습니다 — 안 읽음은 굵은 글자뿐이고, 뱃지 · 아이콘으로 시스템 메일을 따로 가르지 않습니다. 검색에서 「ARA SYSTEM」 이나 postmaster 로 찾을 수 있습니다.</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>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>보낸 사람 ARA SYSTEM <postmaster@arasystem.it.kr>. 서버가 그 직원의 받은편지함에 바로 넣습니다 — 안 읽음 · 받은 시각은 지금 · 실시간 알림과 바탕화면 알림이 갑니다. 필터 · 스팸 판정은 거치지 않습니다.</li>
|
||||
<li>보내는 때: 관리자가 비밀번호를 재설정하거나 2단계 인증을 껐을 때, 올린 대용량 파일이 위험으로 판정됐을 때(11단계에서 미룬 것). 넣지 못해도 원래 일은 그대로 끝납니다.</li>
|
||||
<li>본문은 「인사 한 줄 → 표 → 할 일(메뉴 경로 글) → 문의 줄」 차례입니다. 보내는 메일 정화의 허용 목록 안 HTML(표 · 칸 색 · 테두리 · 굵기)이고, 같은 글의 텍스트 본문도 함께 넣습니다.</li>
|
||||
<li>알림 메일에는 링크를 넣지 않습니다 — 직원에게 「회사 보안 알림에는 링크가 없다」는 습관을 주어 링크 달린 피싱 메일이 눈에 띄게 합니다. 할 일은 메뉴 경로(웹메일 › 설정 › …)를 굵은 글로 적고, 맨 아래 한 줄로도 알립니다.</li>
|
||||
<li>문의 줄의 연락처는 문의 연락처 설정값입니다 — 정하지 않았으면 연락처 줄이 빠지고 「…IT 담당에게 알려 주세요.」로 끝납니다.</li>
|
||||
<li>웹메일 안의 알림 단추(2단계 인증을 켠 뒤의 [앱 비밀번호 만들기] · 11단계 위험 파일 알림의 [대용량 첨부 보기])는 메일이 아니라 그대로 둡니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-bottom: -10px; padding-top: 6px; border-top: 1px solid #E6E8EC">
|
||||
<h2 style="margin: 10px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em">휴지통 · 스팸메일함 — 30일 안내 줄</h2>
|
||||
<span style="font-size: 12.5px; color: #667085">목록 머리 바로 아래 · 기존 [비우기] 단추는 그대로</span>
|
||||
</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>
|
||||
<section aria-labelledby="mn-trash-title" style="display: flex; flex-direction: column; border: 1px solid #EEF0F3; border-radius: 10px; overflow: hidden; background: #FFFFFF">
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #E6E8EC">
|
||||
<h2 id="mn-trash-title" style="margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em">휴지통</h2>
|
||||
<span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">전체 23</span>
|
||||
<button type="button" class="danger" style="margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; 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="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
|
||||
<span>휴지통 비우기</span>
|
||||
</button>
|
||||
</div>
|
||||
<p style="display: flex; align-items: center; gap: 8px; margin: 0; box-sizing: border-box; padding: 8px 16px; border-bottom: 1px solid #EEF0F3; background: #F8F9FB; font-size: 12.5px; color: #4A5363">
|
||||
<svg width="14" height="14" 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"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
|
||||
<span>휴지통에 들어간 메일은 30일 뒤 자동으로 지워집니다.</span>
|
||||
</p>
|
||||
<ul aria-label="휴지통 메일 목록" style="list-style: none; margin: 0; padding: 0">
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">호스팅 안내</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">10월 21일</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">(광고) 서버 호스팅 연말 할인 안내</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">박준호</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">10월 20일</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">Re: 주간 인프라 점검 결과</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">인사팀</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">10월 14일</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">[인사팀] 10월 워크숍 장소 변경</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</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>
|
||||
<section aria-labelledby="mn-junk-title" style="display: flex; flex-direction: column; border: 1px solid #EEF0F3; border-radius: 10px; overflow: hidden; background: #FFFFFF">
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #E6E8EC">
|
||||
<h2 id="mn-junk-title" style="margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em">스팸메일함</h2>
|
||||
<span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">전체 9</span>
|
||||
<button type="button" class="danger" style="margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; 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="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
|
||||
<span>스팸메일함 비우기</span>
|
||||
</button>
|
||||
</div>
|
||||
<p style="display: flex; align-items: center; gap: 8px; margin: 0; box-sizing: border-box; padding: 8px 16px; border-bottom: 1px solid #EEF0F3; background: #F8F9FB; font-size: 12.5px; color: #4A5363">
|
||||
<svg width="14" height="14" 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"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
|
||||
<span>스팸메일함에 들어간 메일은 30일 뒤 자동으로 지워집니다.</span>
|
||||
</p>
|
||||
<ul aria-label="스팸메일함 메일 목록" style="list-style: none; margin: 0; padding: 0">
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: #171C26">Global Pharma</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오전 7:12</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #171C26">URGENT: Your invoice #48213</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">택배 알림</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">어제</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">[배송 지연] 주소 확인이 필요합니다</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
|
||||
<button type="button" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; border: 0; background: transparent; font: inherit; line-height: 1.4; color: inherit; text-align: left; cursor: pointer">
|
||||
<span style="display: flex; align-items: center; gap: 6px">
|
||||
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; color: #344054">이벤트 담당</span>
|
||||
<span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">10월 27일</span>
|
||||
</span>
|
||||
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
|
||||
<span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #171C26">축하합니다! 당첨 안내</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" aria-label="중요 표시" aria-pressed="false" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #98A2B3; 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</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>
|
||||
<section aria-labelledby="mn-trash-empty-title" style="display: flex; flex-direction: column; border: 1px solid #EEF0F3; border-radius: 10px; overflow: hidden; background: #FFFFFF">
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #E6E8EC">
|
||||
<h2 id="mn-trash-empty-title" style="margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em">휴지통</h2>
|
||||
<span style="font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">전체 0</span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 24px; text-align: center">
|
||||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
|
||||
<p style="margin: 6px 0 0; font-size: 14px; font-weight: 600">휴지통이 비어 있습니다</p>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">삭제한 메일이 여기에 표시됩니다. 들어간 지 30일이 지난 메일은 자동으로 지워집니다.</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-bottom: -10px; padding-top: 6px; border-top: 1px solid #E6E8EC">
|
||||
<h2 style="margin: 10px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em">로그인 화면 — 문의 줄</h2>
|
||||
<span style="font-size: 12.5px; color: #667085">연락처는 설정값 · 보드의 이름 · 번호는 자리 표시</span>
|
||||
</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">로그인</h1>
|
||||
<p style="margin: 0; color: #4A5363">회사 메일 계정(@arasystem.it.kr)으로 로그인하세요.</p>
|
||||
</div>
|
||||
|
||||
<form style="display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="lc-email-a" style="font-size: 12.5px; font-weight: 600; color: #344054">메일 주소</label>
|
||||
<input id="lc-email-a" type="email" autocomplete="username" placeholder="name@arasystem.it.kr" style="min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; font: inherit; font-size: 14px; color: #171C26; background: #FFFFFF">
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="lc-pw-a" style="font-size: 12.5px; font-weight: 600; color: #344054">비밀번호</label>
|
||||
<input id="lc-pw-a" type="password" autocomplete="current-password" placeholder="비밀번호 입력" style="min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; font: inherit; font-size: 14px; 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">비밀번호를 잊으셨나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
|
||||
|
||||
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 12px; line-height: 1.6; color: #667085">Outlook이나 휴대폰 기본 메일 앱에서도 같은 계정으로 메일을 쓸 수 있습니다. (IMAP · SMTP 설정)</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">잠긴 계정도 같은 글 — 문의 줄은 그대로</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">로그인</h1>
|
||||
<p style="margin: 0; color: #4A5363">회사 메일 계정(@arasystem.it.kr)으로 로그인하세요.</p>
|
||||
</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="lc-email-b" style="font-size: 12.5px; font-weight: 600; color: #344054">메일 주소</label>
|
||||
<input id="lc-email-b" type="email" autocomplete="username" placeholder="name@arasystem.it.kr" aria-invalid="true" style="min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #B42318; border-radius: 8px; font: inherit; font-size: 14px; color: #171C26; background: #FFFFFF">
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="lc-pw-b" style="font-size: 12.5px; font-weight: 600; color: #344054">비밀번호</label>
|
||||
<input id="lc-pw-b" type="password" autocomplete="current-password" placeholder="비밀번호 입력" aria-invalid="true" style="min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #B42318; border-radius: 8px; font: inherit; font-size: 14px; 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">비밀번호를 잊으셨나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
|
||||
|
||||
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 12px; line-height: 1.6; color: #667085">Outlook이나 휴대폰 기본 메일 앱에서도 같은 계정으로 메일을 쓸 수 있습니다. (IMAP · SMTP 설정)</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">지금 글 그대로</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">로그인</h1>
|
||||
<p style="margin: 0; color: #4A5363">회사 메일 계정(@arasystem.it.kr)으로 로그인하세요.</p>
|
||||
</div>
|
||||
|
||||
<form style="display: flex; flex-direction: column; gap: 14px">
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="lc-email-c" style="font-size: 12.5px; font-weight: 600; color: #344054">메일 주소</label>
|
||||
<input id="lc-email-c" type="email" autocomplete="username" placeholder="name@arasystem.it.kr" style="min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; font: inherit; font-size: 14px; color: #171C26; background: #FFFFFF">
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px">
|
||||
<label for="lc-pw-c" style="font-size: 12.5px; font-weight: 600; color: #344054">비밀번호</label>
|
||||
<input id="lc-pw-c" type="password" autocomplete="current-password" placeholder="비밀번호 입력" style="min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; font: inherit; font-size: 14px; 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이나 휴대폰 기본 메일 앱에서도 같은 계정으로 메일을 쓸 수 있습니다. (IMAP · SMTP 설정)</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">휴지통 · 스팸메일함 — 30일</h2>
|
||||
</div>
|
||||
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
|
||||
<li>메일 서버가 매일 새벽 3시에 지웁니다 — 그 메일함에 들어간 날부터 30일(휴지통 · 스팸메일함 따로). API 는 없고 화면에 줄만 둡니다.</li>
|
||||
<li>줄은 두 메일함 목록의 머리 바로 아래에 늘 있습니다(닫기 없음). 목록 보기(표)에서는 표 머리 위 — 같은 줄.</li>
|
||||
<li>메일이 없으면 줄을 지우고 빈 상태의 안내 글에 같은 뜻을 붙입니다. 검색 결과 · 다른 메일함에는 보이지 않습니다.</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>연락처는 운영 도구로 넣는 설정값(200자 · 한 줄 — GET /api/support-contact, 로그인 없음)입니다. 보드의 「IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it」은 자리 표시이고, 넣지 않으면 지금 글 그대로입니다.</li>
|
||||
<li>글자로만 보입니다(링크 · HTML 없음). 물음 다음 줄에 연락처 — 물음은 회색, 연락처는 한 단계 진하게(길어도 중간에서 끊기지 않게).</li>
|
||||
<li>들어가는 곳: 로그인(「비밀번호를 잊으셨나요?」) · 2단계 코드 단계와 2단계 켜기(「인증 앱을 쓸 수 없나요?」) · 시스템 알림 메일의 마지막 줄.</li>
|
||||
<li>정하지 않았으면 지금 글 그대로 — 「비밀번호를 잊으셨다면 시스템 관리자에게 문의해 주세요.」 · 「인증 앱을 쓸 수 없나요? 관리자에게 문의해 주세요.」</li>
|
||||
<li>잠긴 계정(퇴사 · 털림)도 비밀번호 틀림과 같은 글입니다 — 원인을 가리지 않는 규칙. 그 아래 문의 줄로 안내합니다.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":3780}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -761,6 +761,230 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
|
||||
복구 코드, 이 브라우저 기억, 문자 · 메일 코드, 보안 키 · 패스키, 관리자가 2단계 인증을 강제하기(13단계), 켜진 채 휴대폰 바꾸기, 앱 비밀번호 이름 바꾸기 · 만료,
|
||||
새 기기 로그인 알림 메일, 계정 변경 기록(비밀번호 바꾸기 · 2단계 켜기 등), 로그인 기록의 나라 · 지역.
|
||||
|
||||
## 13단계 — 전환 준비 (2026-10-31 확정 — `LoginPasswordChange` · `LoginTwoFactorSetup` · `SettingsMailClients` · `MailNoticesCutover`)
|
||||
|
||||
전 직원 전환 전에 필요한 화면이다 — 관리자가 준 임시 비밀번호를 바꾸는 로그인 단계, 회사가 2단계 인증을 필수로 정했을 때의 켜기 단계와 유예 안내,
|
||||
메일 프로그램 연결 안내, 받은편지함 알림 메일 · 휴지통 30일 안내 · 로그인 문의 줄.
|
||||
데이터 · 규칙은 계약 6절(`docs/mail/api-contract.md` "전환 준비 — 13단계")이 정한다 — 제한된 세션(`restriction`) · `twoFactorDeadline` · `isRequired` · `GET /api/support-contact` · `AUTH_010`.
|
||||
알림 메일과 메일 프로그램 연결의 글은 이 절이 원본이다(화면 상수 · 메일 본문으로 그대로 옮긴다).
|
||||
설정 메뉴의 계정 묶음: 비밀번호 · 2단계 인증 · 앱 비밀번호 · **메일 프로그램 연결**(새 — 아이콘 PC · 휴대폰, lucide `monitor-smartphone`) · 로그인 기록.
|
||||
새 토큰은 없다 — 유예 노란 줄 40 · 줄 안 단추 36 은 안내 줄 밀도 예외(`--size-notice-bar` · `--size-notice-action`)를 다시 쓴다. 메일 프로그램 연결의 펼침 줄은 52(이름 · 설명 두 줄)라 예외가 아니다.
|
||||
로그인 틀(브랜드 패널 + 양식 칸 360)과 칸 · 단추 · 위쪽 오류 상자는 `Login` · `LoginTwoFactor` 와 같다. 각 보드 위쪽은 실제 크기 화면, 아래는 상태 카드다.
|
||||
|
||||
### 로그인 — 새 비밀번호 정하기 (`LoginPasswordChange`)
|
||||
|
||||
- **누가 오나**: 운영 도구로 입사 · 비밀번호 재설정을 한 직원이 받은 임시 비밀번호로 로그인했을 때(`restriction: passwordChange`).
|
||||
마칠 때까지 메일 · 주소록 · 설정을 열 수 없다(`AUTH_010`) — 새로고침 · 다른 탭 · 주소를 바꿔 들어와도 이 단계다(화면은 `me` 의 `restriction` 을 본다).
|
||||
2단계 인증을 켠 직원은 비밀번호 → 코드 → 이 단계다(비밀번호만 재설정하면 2단계는 그대로). 2단계 인증이 필수인데 아직 켜지 않았으면 이 단계 다음이 「2단계 인증 켜기」다.
|
||||
- **틀**(위에서부터):
|
||||
- 제목 "새 비밀번호를 정해 주세요" / "관리자가 정한 임시 비밀번호로 로그인했습니다. 메일을 쓰려면 먼저 새 비밀번호를 정해 주세요."
|
||||
- 주소 + [다른 계정으로 로그인] — 로그아웃하고 처음 화면으로(주소 칸은 비움).
|
||||
- (임시 비밀번호가 화면 메모리에 없을 때만) 「임시 비밀번호」 + "관리자에게 받은 임시 비밀번호를 다시 넣어 주세요."
|
||||
- 「새 비밀번호」 + "8자 이상 · 임시 비밀번호와 달라야 합니다. 영문 · 숫자 · 기호를 섞으면 더 안전합니다."
|
||||
- 「새 비밀번호 확인」 — 보기 단추 없이 새 비밀번호의 보기를 따른다(설정 › 비밀번호와 같다).
|
||||
- (2단계 인증을 켠 직원만) 맨 아래 「인증 앱 코드」 + "로그인할 때 넣은 코드는 다시 쓸 수 없습니다 — 앱에 다음 코드가 뜨면 넣어 주세요." — 로그인 코드 칸 모양(18px · 자간), 숫자 6자리 · `one-time-code`.
|
||||
- [비밀번호 바꾸고 계속] — 보내는 동안 「바꾸는 중…」(`aria-busy`, 칸은 읽기만). 요청 한도 30초(`PASSWORD_CHANGE_TIMEOUT_MS` — 설정 › 비밀번호와 같다).
|
||||
- 맨 아래(위쪽 선 · 12px 회색): "메일 프로그램(아웃룩 등)을 연결해 두었다면 바꾼 뒤 다시 연결해야 합니다."
|
||||
- 칸은 로그인 칸 모양(테두리 #8A94A3 · 글자 14px · 이름 12.5px 굵게)이고, 임시 비밀번호 · 새 비밀번호 칸 끝에 설정 화면의 [보기](44)를 둔다 — 로그인 첫 화면의 비밀번호 칸에는 없다.
|
||||
- **임시 비밀번호**: 로그인 때 넣은 것을 화면 메모리에서 지금 비밀번호로 쓴다 — 묻지 않는다. 10분 뒤 메모리에서 지운다(12단계 코드 단계와 같은 10분).
|
||||
메모리에 없으면(새로고침 · 다른 탭 · 10분 지남) 맨 위에 「임시 비밀번호」 칸을 보인다.
|
||||
- **코드를 다시 받는 까닭**: 엔진이 비밀번호를 바꿀 때 코드를 꼭 요구하고, 로그인 때 쓴 코드를 서버가 기억해 다시 써도 새 비밀번호를 치는 사이 코드의 유효 시간(앞뒤 30초)을 지날 수 있다.
|
||||
그래서 앱에 다음 코드가 뜨면 넣는다(성공에 쓴 코드는 2분 동안 다시 받지 않는다 — 12단계).
|
||||
- **상태**(칸 아래 오류는 알림 없이 · 처음 걸린 칸에 초점):
|
||||
- 규칙에 맞지 않음(8자 미만 · 임시 비밀번호와 같음) — 보내지 않고 새 비밀번호의 안내 글이 그대로 빨간 오류가 된다. 엔진이 규칙으로 거절하면 같은 자리에 `VAL_001` 사전 문구.
|
||||
- 확인 칸이 다름 — 확인 칸 아래 "새 비밀번호가 서로 다릅니다."
|
||||
- 임시 비밀번호 틀림 — 그 칸 아래 `AUTH_005` 사전 문구("지금 비밀번호가 올바르지 않습니다.").
|
||||
- 코드 틀림 — 코드 칸 아래 `AUTH_006` 사전 문구, 칸을 비운다.
|
||||
- 시도 과다 — 위쪽 빨간 상자(로그인 오류와 같은 자리 · 같은 모양)에 `REQ_001` 사전 문구. 임시 비밀번호 틀림은 로그인 실패 한도, 코드 틀림은 코드 실패 한도로 센다. 칸 · 단추는 그대로.
|
||||
- **끝나면**: 서버가 제한을 지우고 화면은 `/auth/refresh` 로 새 토큰을 받아 받은편지함으로 간다(로그인 전에 가려던 주소가 있으면 그곳) — 알림 "새 비밀번호를 정했습니다."
|
||||
2단계 인증이 필수인데 켜지 않았으면 받은편지함 대신 「2단계 인증 켜기」 단계로. 다른 곳의 웹메일 로그인 끊기 · 앱 비밀번호 지우기는 설정 › 비밀번호와 같다(계약 5절) — 맨 아래 안내 줄이 그 까닭이다.
|
||||
|
||||
### 로그인 — 2단계 인증 켜기(필수) (`LoginTwoFactorSetup`)
|
||||
|
||||
- **누가 오나**: 회사가 2단계 인증을 필수로 정한 날(시작일)부터, 아직 켜지 않은 직원(예외 주소 빼고)이 비밀번호를 맞혔을 때(`restriction: twoFactorSetup`).
|
||||
켜기 전에는 메일 · 주소록 · 설정을 열 수 없다(`AUTH_010`). 새 비밀번호 정하기가 함께 걸린 직원(입사)은 그것 먼저.
|
||||
- **틀**(위에서부터):
|
||||
- 제목 "2단계 인증을 켜야 합니다" / "회사 정책에 따라 로그인할 때 휴대폰 인증 앱의 코드도 확인합니다. 지금 켜면 바로 메일로 이어집니다."
|
||||
- 주소 + [다른 계정으로 로그인]
|
||||
- 차례(청록 굵은 숫자 — 동그라미 없음, 숫자 칸 22 · 사이 18 — 12단계 켜기 창과 같다):
|
||||
- ① "인증 앱으로 QR 코드를 찍어 주세요" / "인증 앱에서 [+] → 「QR 코드 스캔」을 고릅니다. 앱이 없으면 Google Authenticator · Microsoft Authenticator 를 먼저 설치해 주세요."
|
||||
QR(148 — 양식 칸 360 안에 키를 옆에 두려고 12단계 켜기 창의 160 보다 작게) 오른쪽에 "찍을 수 없으면 이 키를 입력하세요"(12px 굵게) + 32자 키(4자씩 · 두 줄 · 고정폭 12px) +
|
||||
[복사](36 — "키를 복사했습니다." / 못 하면 "키를 복사하지 못했습니다. 키를 직접 골라 복사해 주세요."), 그 아래 "앱에는 「ARA SYSTEM (주소)」로 저장됩니다."
|
||||
- ② 「앱에 표시된 6자리 코드」 — 로그인 코드 칸 모양.
|
||||
- (지금 비밀번호가 화면 메모리에 없을 때만) ③ 「지금 비밀번호」 + "새로고침해서 다시 넣어야 합니다." — [보기] 있음.
|
||||
- [켜고 계속] — 보내는 동안 「켜는 중…」(`aria-busy`, 칸은 읽기만). 요청 한도 30초(`TWO_FACTOR_CHANGE_TIMEOUT_MS`).
|
||||
- 문의 줄 "인증 앱을 쓸 수 없나요?" + 연락처(아래 "문의 줄").
|
||||
- 맨 아래(위쪽 선 · 12px): "Outlook · 휴대폰 메일 앱은 이 코드를 묻지 않습니다. 켠 뒤에는 설정 › 앱 비밀번호에서 만든 비밀번호로 연결합니다."
|
||||
- **지금 비밀번호**: 로그인 때 넣은 것(방금 새 비밀번호를 정했으면 그것)을 화면 메모리에서 쓴다 — 12단계 켜기 창의 ③ 을 묻지 않는다. 10분 뒤 지우고, 메모리에 없으면 ③ 칸을 보인다.
|
||||
- **키**: 이 화면을 열 때마다 새로 만든다(`POST /api/two-factor/enrollments` — 10분 안에 켠다). 켜지 않고 떠나면(다른 계정 · 새로고침) 그 키는 버린다 —
|
||||
새로고침 뒤에는 QR · 키가 바뀌므로 앱에 먼저 저장한 항목은 지우고 다시 찍는다. QR · 키는 화면 메모리에만 두고 로그에 남기지 않는다(12단계 그대로).
|
||||
- **상태**:
|
||||
- 코드 틀림 — 칸 아래 `AUTH_006` 사전 문구, 칸을 비우고 초점. QR · 키는 그대로라 다시 찍지 않는다.
|
||||
- 시간이 지남 · 그사이 바뀜(`AUTH_008`) — 위쪽 빨간 상자에 사전 문구("2단계 인증 설정이 그사이 바뀌었거나 시간이 지났습니다. 처음부터 다시 해 주세요.") + 새 QR · 키로 다시 그린다(코드 칸은 비움).
|
||||
다른 곳에서 이미 켰으면 이 단계를 건너뛰고 받은편지함으로.
|
||||
- 지금 비밀번호 틀림(③ 이 있을 때) — 칸 아래 `AUTH_005`. 둘 다 틀렸으면 코드부터(서버가 코드를 먼저 본다 — 12단계).
|
||||
- 시도 과다 — 위쪽 상자에 `REQ_001`(코드 실패는 같은 주소 15분 5회 · 하루 20회 — 12단계 그대로).
|
||||
- **켠 뒤**: 서버가 제한을 지우고 받은편지함으로 간다(가려던 주소가 있으면 그곳) — 알림 "2단계 인증을 켰습니다. 메일 프로그램은 앱 비밀번호로 연결합니다." + [앱 비밀번호 만들기]
|
||||
(단추가 있는 알림 — 10초, 마우스 · 초점이 있으면 멈춤) → 설정 › 앱 비밀번호. 웹메일 비밀번호로 메일 프로그램을 연결해 둔 직원이 다음 연결 때 막히기 전에 알린다.
|
||||
- **유예 기간**(시작일 전 — 로그인은 그대로, `me` 의 `twoFactorDeadline`):
|
||||
- 메일 모듈 화면(목록 · 읽기 · 쓰기 · 검색)의 상단 바 바로 아래, 모듈 폭 전체에 노란 줄 하나(높이 40 · 바탕 #FFF7E6 · 아래 선 #F0D9A8 · 글 #7A5200 · 방패 아이콘 15):
|
||||
**"11월 30일까지 2단계 인증을 켜 주세요"**(굵게) " — 그 뒤에는 켜야 로그인할 수 있습니다." + [지금 켜기](36 — 읽기 화면 안내 줄의 단추와 같은 `.notice-btn`) → 설정 › 2단계 인증.
|
||||
- 날짜는 시작일의 전날(KST)이다 — 시작일이 12월 1일이면 「11월 30일까지」. 올해가 아니면 해를 붙인다("2027년 1월 3일까지").
|
||||
- 닫기 단추는 없다 — 켜야 사라진다. 주소록 · 설정에는 없다(설정 › 2단계 인증은 아래 안내).
|
||||
- **설정 › 2단계 인증 — 필수인 직원**(`GET /api/two-factor` 의 `isRequired` · `deadline`):
|
||||
- 유예 중 · 꺼짐 — 머리 아래 갈색 상자(방패): **"11월 30일까지 2단계 인증을 켜 주세요"** / "회사 정책에 따라 그 뒤에는 2단계 인증을 켜야 로그인할 수 있습니다."
|
||||
그 아래 상태 상자 · 경고 · 켜는 차례 · 켜기 창은 12단계 그대로.
|
||||
- 켜짐 — 상태 상자의 [2단계 인증 끄기] 대신 회색 글 "회사 정책에 따라 끌 수 없습니다"(서버도 `VAL_001` 로 거절).
|
||||
아래 안내의 첫 줄은 "휴대폰을 바꿀 때는 관리자에게 2단계 인증 해제를 요청해 주세요 — 다음 로그인 때 새 휴대폰으로 다시 켭니다."(나머지 두 줄은 12단계 그대로).
|
||||
- **휴대폰을 바꿀 때**(필수인 직원): 관리자에게 「2단계 해제」를 요청한다(운영 도구 — 받은편지함 알림 메일이 간다) → 다음 로그인 때 이 켜기 단계로 새 휴대폰을 등록한다.
|
||||
직원이 직접 하는 휴대폰 바꾸기는 미뤘다(아래).
|
||||
|
||||
### 설정 › 계정 › 메일 프로그램 연결 (`SettingsMailClients`)
|
||||
|
||||
- **메뉴**: 계정 묶음의 앱 비밀번호 아래 「메일 프로그램 연결」. API 는 없다 — 화면 상수로만 그린다(설정값은 `MAIL_CLIENT_SETTINGS` — 앱 비밀번호 화면과 같은 값, 차례 글도 상수).
|
||||
2단계 인증 상태만 이미 있는 `GET /api/two-factor`(스토어)로 보고, 받지 못하면 켠 직원의 안내로 둔다(더 안전한 쪽).
|
||||
- 머리 "메일 프로그램 연결" + "아웃룩 · 썬더버드 · 휴대폰 메일 앱에서 회사 메일을 보는 방법입니다."
|
||||
- **설정값 상자**: 「메일 프로그램 설정값」 — 앱 비밀번호 화면과 같은 이름 · 값 표(이름 칸 136).
|
||||
|
||||
| 이름 | 값 |
|
||||
| --- | --- |
|
||||
| 받는 메일 (IMAP) | **mx1.arasystem.it.kr** · 포트 993 · SSL/TLS |
|
||||
| 보내는 메일 (SMTP) | **mx1.arasystem.it.kr** · 포트 465 · SSL/TLS |
|
||||
| 사용자 이름 | **(직원 주소)** — 메일 주소 전체 |
|
||||
| 비밀번호 | 켠 직원 "앱 비밀번호 — 웹메일 비밀번호가 아닙니다" / 켜지 않은 직원 "앱 비밀번호(권장) — 2단계 인증을 켜지 않았으면 웹메일 비밀번호도 됩니다" |
|
||||
|
||||
- **상자 바로 아래** — 2단계 인증 상태로 가른다. 둘 다 [앱 비밀번호 만들기](36) → 설정 › 앱 비밀번호.
|
||||
- 켠 직원 — 갈색 상자(열쇠): **"비밀번호 칸에는 꼭 앱 비밀번호를 넣어 주세요"** / "2단계 인증을 켜 두어 웹메일 비밀번호로는 연결되지 않습니다. 프로그램마다 앱 비밀번호를 하나씩 만들어 넣습니다." — 단추 `.notice-btn`.
|
||||
- 켜지 않은 직원 — 청록 상자(열쇠): **"앱 비밀번호로 연결하기를 권합니다"** / "지금은 웹메일 비밀번호로도 연결되지만, 2단계 인증을 켜면 다시 연결할 때 막힙니다. 앱 비밀번호는 기기마다 따로 지울 수 있어 잃어버렸을 때도 안전합니다." — 단추 `.line-btn`.
|
||||
- **프로그램별 연결 차례**: 「프로그램별 연결 차례」 + "쓰는 프로그램을 누르면 차례가 펼쳐집니다."
|
||||
- 그 아래 갈색 주의 줄(경고 삼각형): "새 Outlook · 휴대폰 Outlook 앱은 메일을 Microsoft 클라우드를 거쳐 받습니다 — 회사 정책에 따라 쓰지 않는 것이 좋습니다."
|
||||
권하지 않음으로 정했다(2026-10-31) — 회사가 허용하면 줄을 지운다.
|
||||
- 펼침 목록(테두리 상자 하나 · 줄 사이 선): 줄 52 — 아이콘 18(PC · 휴대폰) · 이름(굵게) / 설명(12px 회색) · 오른쪽 ⌄(펼치면 ⌃). 줄 전체가 버튼(`aria-expanded` · 펼친 것만 `aria-controls`)이고,
|
||||
펼친 차례는 region(이름 = 그 버튼)으로 이름 글과 같은 선(왼쪽 44)에서 번호 줄(청록 굵은 숫자 — 동그라미 없음)로 보인다. 처음에는 모두 접힘, 하나를 펼치면 다른 것은 접힌다.
|
||||
- 표기: 누르는 것 [ ], 고르는 것 「 」, 호스트 이름은 굵게 — 12단계 「켜는 차례」와 같다. 화면 그림은 넣지 않는다. 맥 메일 · 휴대폰 Outlook 앱은 넣지 않는다.
|
||||
- 차례 글(아래 그대로 — 구현 때 실제 앱(한국어판)의 메뉴 이름과 한 번 더 맞춘다):
|
||||
- **아웃룩 (Windows)** — 설명 "Microsoft 365 · Outlook 2016 이후의 데스크톱 Outlook"
|
||||
1. Outlook 에서 [파일] → [계정 추가]를 누릅니다.
|
||||
2. 메일 주소를 넣고 [고급 옵션] → 「내 계정을 수동으로 설정」을 고른 뒤 [연결]을 누릅니다.
|
||||
3. 계정 유형에서 「IMAP」을 고릅니다.
|
||||
4. 받는 메일 · 보내는 메일 모두 서버 **mx1.arasystem.it.kr**, 포트는 993 · 465, 암호화 방법은 「SSL/TLS」를 넣고 [다음]을 누릅니다.
|
||||
5. 비밀번호 칸에 앱 비밀번호를 넣고 [연결]을 누릅니다.
|
||||
- **새 Outlook** — 설명 "Windows 의 새 Outlook — 메일이 Microsoft 클라우드를 거칩니다"
|
||||
1. [설정](톱니) → [계정] → [메일 계정] → [계정 추가]를 누릅니다.
|
||||
2. 메일 주소를 넣고 [계속] → 공급자에서 「IMAP」을 고릅니다.
|
||||
3. [고급 설정 표시]를 누르고 받는 · 보내는 서버에 위 설정값을, 비밀번호 칸 둘 다에 앱 비밀번호를 넣습니다.
|
||||
4. [계속]을 누르면 메일을 Microsoft 클라우드에 동기화한다는 안내가 나옵니다 — 위 주의를 읽고 정합니다.
|
||||
- **썬더버드** — 설명 "Windows · Mac — 주소와 앱 비밀번호만 넣으면 됩니다"
|
||||
1. 썬더버드에서 [≡] → [새로 만들기] → [기존 메일 계정]을 누릅니다.
|
||||
2. 이름 · 메일 주소 · 비밀번호(앱 비밀번호)를 넣고 [계속]을 누릅니다.
|
||||
3. 메일 주소와 앱 비밀번호만 넣으면 설정을 스스로 찾습니다 — 「IMAP」이 보이면 [완료]를 누릅니다.
|
||||
4. 찾지 못하면 [수동 설정]에서 위 설정값을 넣습니다.
|
||||
- **iPhone · iPad** — 설명 "기본 메일 앱"
|
||||
1. [설정] → [메일] → [계정] → [계정 추가] → [기타] → [메일 계정 추가]를 누릅니다. (iOS 18 은 [설정] → [앱] → [메일])
|
||||
2. 이름 · 메일 주소 · 암호(앱 비밀번호) · 설명을 넣고 [다음]을 누릅니다.
|
||||
3. 「IMAP」을 고르고, 받는 · 보내는 메일 서버의 호스트 이름에 **mx1.arasystem.it.kr**, 사용자 이름에 메일 주소 전체, 암호에 앱 비밀번호를 넣습니다 — 보내는 메일 서버도 「선택 사항」이라 보여도 비우지 않습니다.
|
||||
4. [다음] → [저장]을 누릅니다. 포트는 스스로 993 · 465 로 맞춥니다.
|
||||
- **안드로이드** — 설명 "Gmail 앱 — 다른 계정(IMAP) · 삼성 이메일 앱도 같은 값"
|
||||
1. Gmail 앱에서 프로필 사진 → [다른 계정 추가] → [기타]를 누릅니다.
|
||||
2. 메일 주소를 넣고 [수동 설정] → 「개인(IMAP)」을 고릅니다.
|
||||
3. 비밀번호에 앱 비밀번호를 넣습니다.
|
||||
4. 받는 서버 · 보내는 서버에 **mx1.arasystem.it.kr**, 포트는 993 · 465, 보안 유형은 「SSL/TLS」를 넣고 [다음]을 누릅니다.
|
||||
- **아래 안내 상자**(#F3F8F8 · 가운뎃점 줄): "연결이 안 되면 사용자 이름에 메일 주소 전체를, 비밀번호 칸에 앱 비밀번호(띄어쓰기 없이 40자)를 넣었는지 확인해 주세요." ·
|
||||
"POP3 로는 연결할 수 없습니다 — 계정 유형은 IMAP 을 골라 주세요." · "웹메일 비밀번호를 바꾸면 앱 비밀번호도 모두 지워집니다 — 프로그램마다 새로 만들어 넣어 주세요." · "그래도 안 되면 관리자에게 문의해 주세요."
|
||||
- **좁은 폭**: 설정 메뉴가 콘텐츠 위로 올라간다(지금 설정 셸의 줄바꿈). 설정값 상자는 이름(12px 회색) 위 · 값 아래 한 칸으로. 펼침 줄의 이름 · 설명이 줄을 바꿔도 줄 전체가 누르는 곳이다.
|
||||
- **앱 비밀번호 화면(12단계)에 더하는 것**: 설정값 상자 바로 아래 한 줄(12.5px · #4A5363) "프로그램별 연결 방법은 메일 프로그램 연결에서 볼 수 있습니다." — 「메일 프로그램 연결」이 이 화면 링크다. 12단계 보드는 고치지 않았다.
|
||||
- **전 직원 전환 때**: 썬더버드의 "설정을 스스로 찾습니다"와 아웃룩 자동 설정은 autoconfig · autodiscover 주소와 SRV 레코드를 낸 뒤부터 된다(인프라 — `mail/README.md`) —
|
||||
그 전에는 썬더버드도 [수동 설정](4번 차례)이다. 호스트 `mx1.arasystem.it.kr` 는 전환 때 다시 본다(같은 상수).
|
||||
|
||||
### 받은편지함 알림 메일 · 휴지통 30일 · 문의 줄 (`MailNoticesCutover`)
|
||||
|
||||
- **알림 메일 — 공통**
|
||||
- 서버가 그 직원의 받은편지함에 바로 넣는다(계약 6절 — 안 읽음 · 받은 시각은 지금 · 실시간 알림과 바탕화면 알림이 간다, 필터 · 스팸 판정은 거치지 않는다). 넣지 못해도 원래 일은 그대로 끝난다.
|
||||
- 보낸 사람 `ARA SYSTEM <postmaster@<MAIL_DOMAIN>>`, 받는 사람 그 직원(`이름 <주소>`). 목록 · 읽기 화면은 다른 메일과 같다 — 보낸 사람 「ARA SYSTEM」, 아바타 "A", 뱃지 · 아이콘으로 따로 가르지 않는다.
|
||||
- **링크를 넣지 않는다** — 직원에게 "회사 보안 알림에는 링크가 없다"는 습관을 주어 링크 달린 피싱 메일이 눈에 띄게 한다. 할 일은 메뉴 경로(웹메일 › 설정 › …)를 굵은 글로 적고, 맨 아래 한 줄로도 알린다.
|
||||
웹메일 안의 알림 단추(2단계 인증을 켠 뒤의 [앱 비밀번호 만들기] · 11단계 위험 파일 알림의 [대용량 첨부 보기])는 메일이 아니라 그대로 둔다.
|
||||
- 본문 차례: 인사 한 줄 → 표 → 할 일(메뉴 경로 글) → 문의 줄 → 맨 아래 한 줄. HTML 과 같은 글의 텍스트 본문을 함께 넣는다.
|
||||
- 자리 표시: `{이름}` 직원의 표시 이름(없으면 주소의 @ 앞) · `{시각}` · `{올린 때}` KST "2026년 10월 30일 (금) 오후 3:20" · `{파일 이름}` 올린 이름 그대로 · `{크기}` 11단계 크기 표기("48.2 MB") ·
|
||||
`{연락처}` 문의 연락처 설정값. 이름 · 파일 이름 · 연락처는 HTML 본문에 넣을 때 이스케이프한다.
|
||||
- 문의 줄: `{확인 문장}` 다음 줄에 `{연락처}`. 연락처를 정하지 않았으면 그 줄을(HTML 은 앞의 `<br>` 와 함께) 뺀다.
|
||||
- 맨 아래 한 줄(세 통 같음): "이 메일은 ARA SYSTEM 이 자동으로 보낸 알림입니다. 회사 보안 알림에는 링크가 없습니다 — 비슷한 메일의 링크는 누르지 마세요."
|
||||
- HTML 꼴(세 통 같음 — 보내는 메일 정화 `sanitize-outgoing-html.ts` 의 허용 목록 안이고 감싸는 div 는 보내는 메일과 같은 기본 글꼴 · 14px · 1.75, 표의 줄은 칸마다 같은 꼴을 되풀이한다):
|
||||
|
||||
```html
|
||||
<div style="font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.75; color: #1F2733">
|
||||
<p style="margin: 0 0 14px">{인사 한 줄}</p>
|
||||
<table style="width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 13.5px; line-height: 1.6">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width: 104px; padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top; background-color: #F8F9FB; color: #4A5363; font-weight: 600; text-align: left">{칸 이름}</th>
|
||||
<td style="padding: 8px 12px; border: 1px solid #E6E8EC; vertical-align: top">{값}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="margin: 0 0 2px; font-weight: 700">할 일</p>
|
||||
<p style="margin: 0 0 20px">{할 일 — 메뉴 경로는 <strong>웹메일 › 설정 › …</strong>}</p>
|
||||
<p style="margin: 0; padding-top: 14px; border-top: 1px solid #EEF0F3; font-size: 13px; color: #4A5363">{확인 문장}<br>{연락처}</p>
|
||||
<p style="margin: 6px 0 0; font-size: 12px; color: #667085">이 메일은 ARA SYSTEM 이 자동으로 보낸 알림입니다. 회사 보안 알림에는 링크가 없습니다 — 비슷한 메일의 링크는 누르지 마세요.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
- 텍스트 본문 꼴(표는 줄마다 "칸 이름: 값", 메뉴 경로는 굵게 없이 그대로):
|
||||
|
||||
```text
|
||||
{인사 한 줄}
|
||||
|
||||
{칸 이름}: {값}
|
||||
|
||||
할 일
|
||||
{할 일}
|
||||
|
||||
{확인 문장}
|
||||
{연락처}
|
||||
|
||||
이 메일은 ARA SYSTEM 이 자동으로 보낸 알림입니다. 회사 보안 알림에는 링크가 없습니다 — 비슷한 메일의 링크는 누르지 마세요.
|
||||
```
|
||||
|
||||
- **① 관리자가 비밀번호를 재설정했습니다** — 운영 도구의 「비밀번호 재설정」 뒤.
|
||||
- 제목 "관리자가 비밀번호를 재설정했습니다"
|
||||
- 인사 "{이름} 님, 관리자가 이 계정의 비밀번호를 임시 비밀번호로 바꿨습니다."
|
||||
- 표: 시각 — `{시각}` / 바뀐 것 — "비밀번호 — 임시 비밀번호로 바뀌었고, 처음 로그인할 때 새 비밀번호를 정합니다" / 로그아웃 — "모든 기기 · 브라우저의 웹메일 로그인을 끊었습니다" /
|
||||
앱 비밀번호 — "모두 지웠습니다 — 메일 프로그램은 새 앱 비밀번호로 다시 연결합니다"
|
||||
- 할 일 "아웃룩 · 휴대폰 메일 앱을 쓰면 메일 프로그램마다 앱 비밀번호가 필요합니다. **웹메일 › 설정 › 계정 › 앱 비밀번호**에서 새로 만들어 주세요."
|
||||
- 확인 문장 "직접 요청한 일이 아니면 바로 IT 담당에게 알려 주세요."
|
||||
- **② 관리자가 2단계 인증을 껐습니다** — 운영 도구의 「2단계 해제」(휴대폰 분실) 뒤.
|
||||
- 제목 "관리자가 2단계 인증을 껐습니다"
|
||||
- 인사 "{이름} 님, 휴대폰을 잃어버렸거나 인증 앱을 쓸 수 없다고 알려 주셔서 관리자가 이 계정의 2단계 인증을 껐습니다."
|
||||
- 표: 시각 — `{시각}` / 바뀐 것 — "2단계 인증 꺼짐 — 지금은 비밀번호만으로 로그인합니다" / 그대로인 것 — "비밀번호 · 앱 비밀번호 · 로그인된 브라우저"
|
||||
- 할 일 "새 휴대폰에 인증 앱을 설치한 뒤 **웹메일 › 설정 › 계정 › 2단계 인증**에서 다시 켜 주세요. 회사가 2단계 인증을 필수로 정했다면 다음 로그인 때 켜는 화면이 먼저 나옵니다."
|
||||
- 확인 문장 "직접 요청한 일이 아니면 바로 IT 담당에게 알려 주세요."
|
||||
- **③ 올린 대용량 파일에서 위험한 내용이 발견되었습니다** — 악성 검사가 위험으로 판정했을 때, 그 파일을 올린 직원에게(파일마다 한 통).
|
||||
- 제목 "올린 대용량 파일에서 위험한 내용이 발견되었습니다"
|
||||
- 인사 "{이름} 님, 올린 대용량 파일을 보안 검사했더니 위험한 내용이 발견되어 보내거나 내려받을 수 없게 막았습니다."
|
||||
- 표: 파일 — `{파일 이름}` / 크기 — `{크기}` / 올린 때 — `{올린 때}` / 조치 — "이 파일만 막았습니다 — 함께 올린 다른 파일은 그대로 보내고 받을 수 있습니다"
|
||||
- 할 일 "직접 만든 파일이 아니면 PC 를 백신으로 검사해 주세요. 다른 곳에서 받은 파일이면 보낸 사람에게도 알려 주세요. 막은 파일은 **웹메일 › 설정 › 메일 › 대용량 첨부**에서 볼 수 있습니다."
|
||||
- 확인 문장 "판정이 잘못되었다고 생각되면 IT 담당에게 알려 주세요."
|
||||
- 웹메일을 열어 둔 동안의 빨간 알림(11단계)은 그대로 둔다 — 이 메일은 그때 열려 있지 않았던 직원도 알게 한다.
|
||||
- **휴지통 · 스팸메일함 — 30일 줄**:
|
||||
- 목록 머리(52) 바로 아래 회색 줄(바탕 #F8F9FB · 아래 선 #EEF0F3 · 위아래 8 · 12.5px #4A5363 · 시계 아이콘 14 #667085):
|
||||
휴지통 "휴지통에 들어간 메일은 30일 뒤 자동으로 지워집니다." / 스팸메일함 "스팸메일함에 들어간 메일은 30일 뒤 자동으로 지워집니다."
|
||||
- 늘 보인다(닫기 없음). 목록 보기(표)에서는 표 머리 위 — 같은 줄. 검색 결과 · 다른 메일함에는 없다. 머리의 [휴지통 비우기] · [스팸메일함 비우기]는 지금 그대로다.
|
||||
- 메일이 없으면 줄을 빼고 빈 상태 안내 글에 붙인다: "휴지통이 비어 있습니다" / "삭제한 메일이 여기에 표시됩니다. 들어간 지 30일이 지난 메일은 자동으로 지워집니다." ·
|
||||
"스팸메일함이 비어 있습니다" / "스팸으로 분류된 메일이 여기에 표시됩니다. 들어간 지 30일이 지난 메일은 자동으로 지워집니다."
|
||||
- 지우는 것은 메일 서버다 — 그 메일함에 들어간 날부터 30일, 매일 새벽 3시(KST). API 는 없다(계약 6절).
|
||||
- **문의 줄**(로그인 · 2단계 코드 단계 · 2단계 켜기):
|
||||
- 연락처는 `GET /api/support-contact` 의 `text`(운영 도구로 넣는 설정값 · 200자 · 한 줄 — 로그인 없이 받는다). 보드의 "IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it" 는 자리 표시다. 글자로만 보인다(링크 · HTML 없음).
|
||||
- 꼴: 물음(12.5px · #667085) 다음 줄에 연락처(#344054 · 500) — 연락처가 길어도 중간에서 끊기지 않게 줄을 나눈다.
|
||||
- 로그인 — 있을 때 "비밀번호를 잊으셨나요?" + 연락처 / 없을 때 지금 글 "비밀번호를 잊으셨다면 시스템 관리자에게 문의해 주세요."
|
||||
- 코드 단계(`LoginTwoFactor`) · 2단계 켜기 — 있을 때 "인증 앱을 쓸 수 없나요?" + 연락처 / 없을 때 지금 글 "인증 앱을 쓸 수 없나요? 관리자에게 문의해 주세요."
|
||||
- 받지 못하면(오류 · `null`) 없을 때와 같다.
|
||||
- 잠긴 계정(퇴사 · 털림)도 비밀번호 틀림과 같은 글 "이메일 또는 비밀번호가 올바르지 않습니다."다(원인을 가리지 않는다) — 그 아래 문의 줄로 안내한다.
|
||||
|
||||
### 처음 판에서 미룬 것
|
||||
|
||||
직원이 직접 하는 휴대폰 바꾸기(지금 휴대폰의 코드로 확인 → 새 휴대폰 등록 — 그때까지는 관리자의 「2단계 해제」), 웹메일 관리자 화면(공통 기반 때 — 그때까지 운영 도구 · 엔진 관리 화면),
|
||||
비밀번호 스스로 재설정(복구 연락처가 필요하다), 새 기기 로그인 알림 메일, 잠긴 계정만의 안내 글, 공용 주소로 보내기 · 공유 메일함.
|
||||
시안에서 뺀 것: 알림 메일의 링크 단추(넣지 않는다 — 위 규칙), 유예 노란 줄의 닫기, 맥 메일 · 휴대폰 Outlook 앱의 연결 차례, 프로그램별 화면 그림.
|
||||
|
||||
## 구현하며 정한 보완 (2026-10-26 — 캔버스에는 아직 없다)
|
||||
|
||||
- 찾지 못한 첨부(보관 시간이 지난 업로드·지워진 원본)는 실패로 표시하고, 전달 원본에는 "빼기"만 둔다(다시 올릴 수 없다).
|
||||
|
||||
@@ -0,0 +1,725 @@
|
||||
<!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}
|
||||
.danger{background:transparent;color:#B42318}
|
||||
.danger:hover{background:#FEF3F2;color:#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}
|
||||
.notice-btn{background:#FFFFFF;color:#7A5200;border:1px solid #F0D9A8}
|
||||
.notice-btn:hover{background:#FFF1D6}
|
||||
.tool{background:transparent;color:#344054}
|
||||
.tool:hover{background:#F2F4F7;color:#171C26}
|
||||
.toast-action{background:transparent;color:#9ED6DB}
|
||||
.toast-action:hover{background:rgba(255,255,255,0.1)}
|
||||
.menu-link{color:#344054}
|
||||
.menu-link:hover{background:#EEF0F3}
|
||||
.acc{background:transparent;color:#171C26}
|
||||
.acc:hover{background:#F8F9FB}
|
||||
.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}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 1440px; height: 3600px; 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: 1210px; 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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
|
||||
<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; font-size: 11px; text-decoration: none; background: #155A64; color: #FFFFFF; font-weight: 600">
|
||||
<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="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"></path><path d="M10 19v-3.96 3.15"></path><path d="M7 19h5"></path><rect x="16" y="12" width="6" height="10" rx="2"></rect></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">메일 프로그램 연결</h1>
|
||||
<p style="margin: 0; color: #4A5363">아웃룩 · 썬더버드 · 휴대폰 메일 앱에서 회사 메일을 보는 방법입니다.</p>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby="mc-setup-title" style="display: flex; flex-direction: column; gap: 8px">
|
||||
<h2 id="mc-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"><strong style="font-weight: 600">mx1.arasystem.it.kr</strong> · 포트 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"><strong style="font-weight: 600">mx1.arasystem.it.kr</strong> · 포트 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"><strong style="font-weight: 600">ara.kim@arasystem.it.kr</strong> — 메일 주소 전체</dd>
|
||||
<dt style="padding: 9px 14px; color: #4A5363">비밀번호</dt>
|
||||
<dd style="margin: 0; padding: 9px 14px">앱 비밀번호 — 웹메일 비밀번호가 아닙니다</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; 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"><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>
|
||||
<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">비밀번호 칸에는 꼭 앱 비밀번호를 넣어 주세요</span>
|
||||
<span>2단계 인증을 켜 두어 웹메일 비밀번호로는 연결되지 않습니다. 프로그램마다 앱 비밀번호를 하나씩 만들어 넣습니다.</span>
|
||||
</div>
|
||||
<a href="SettingsAppPasswords.dc.html" class="notice-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>
|
||||
|
||||
<section aria-labelledby="mc-steps-title" style="display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 id="mc-steps-title" style="margin: 0; font-size: 14px; font-weight: 700">프로그램별 연결 차례</h2>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">쓰는 프로그램을 누르면 차례가 펼쳐집니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; 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"><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>
|
||||
<div style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<span>새 Outlook · 휴대폰 Outlook 앱은 메일을 Microsoft 클라우드를 거쳐 받습니다 — 회사 정책에 따라 쓰지 않는 것이 좋습니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul aria-label="메일 프로그램" style="list-style: none; margin: 0; padding: 0; border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<li style="border-bottom: 1px solid #EEF0F3">
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-outlook-btn" class="acc" aria-expanded="true" aria-controls="mc-outlook-panel" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">아웃룩 (Windows)</span>
|
||||
<span style="font-size: 12px; color: #667085">Microsoft 365 · Outlook 2016 이후의 데스크톱 Outlook</span>
|
||||
</span>
|
||||
<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"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
<div id="mc-outlook-panel" role="region" aria-labelledby="mc-outlook-btn" style="padding: 2px 16px 16px 44px">
|
||||
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<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>Outlook 에서 [파일] → [계정 추가]를 누릅니다.</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>메일 주소를 넣고 [고급 옵션] → 「내 계정을 수동으로 설정」을 고른 뒤 [연결]을 누릅니다.</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>계정 유형에서 「IMAP」을 고릅니다.</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">4</span>
|
||||
<span>받는 메일 · 보내는 메일 모두 서버 <strong style="font-weight: 600">mx1.arasystem.it.kr</strong>, 포트는 993 · 465, 암호화 방법은 「SSL/TLS」를 넣고 [다음]을 누릅니다.</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">5</span>
|
||||
<span>비밀번호 칸에 앱 비밀번호를 넣고 [연결]을 누릅니다.</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #EEF0F3">
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-newoutlook-btn" class="acc" aria-expanded="false" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">새 Outlook</span>
|
||||
<span style="font-size: 12px; color: #667085">Windows 의 새 Outlook — 메일이 Microsoft 클라우드를 거칩니다</span>
|
||||
</span>
|
||||
<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"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #EEF0F3">
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-thunderbird-btn" class="acc" aria-expanded="false" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">썬더버드</span>
|
||||
<span style="font-size: 12px; color: #667085">Windows · Mac — 주소와 앱 비밀번호만 넣으면 됩니다</span>
|
||||
</span>
|
||||
<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"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #EEF0F3">
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-iphone-btn" class="acc" aria-expanded="false" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">iPhone · iPad</span>
|
||||
<span style="font-size: 12px; color: #667085">기본 메일 앱</span>
|
||||
</span>
|
||||
<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"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
</li>
|
||||
<li>
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-android-btn" class="acc" aria-expanded="false" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">안드로이드</span>
|
||||
<span style="font-size: 12px; color: #667085">Gmail 앱 — 다른 계정(IMAP) · 삼성 이메일 앱도 같은 값</span>
|
||||
</span>
|
||||
<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"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
</li>
|
||||
</ul>
|
||||
</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>연결이 안 되면 사용자 이름에 메일 주소 전체를, 비밀번호 칸에 앱 비밀번호(띄어쓰기 없이 40자)를 넣었는지 확인해 주세요.</span></p>
|
||||
<p style="margin: 0; display: flex; gap: 8px"><span aria-hidden="true">·</span><span>POP3 로는 연결할 수 없습니다 — 계정 유형은 IMAP 을 골라 주세요.</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>그래도 안 되면 관리자에게 문의해 주세요.</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">위 화면은 2단계 인증을 켠 직원입니다 — 비밀번호 칸에는 꼭 앱 비밀번호를 넣어야 한다는 상자가 설정값 바로 아래에 있습니다. 프로그램별 차례는 펼침 줄로 하나씩 보입니다. 메뉴는 계정 묶음의 「메일 프로그램 연결」(앱 비밀번호 아래). 2026-10-31 확정.</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 800px minmax(0, 1fr); gap: 20px; align-items: start">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 20px">
|
||||
<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">아웃룩 · 썬더버드 · 휴대폰 메일 앱에서 회사 메일을 보는 방법입니다.</p>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby="mc-setup-title-off" style="display: flex; flex-direction: column; gap: 8px">
|
||||
<h2 id="mc-setup-title-off" 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"><strong style="font-weight: 600">mx1.arasystem.it.kr</strong> · 포트 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"><strong style="font-weight: 600">mx1.arasystem.it.kr</strong> · 포트 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"><strong style="font-weight: 600">ara.kim@arasystem.it.kr</strong> — 메일 주소 전체</dd>
|
||||
<dt style="padding: 9px 14px; color: #4A5363">비밀번호</dt>
|
||||
<dd style="margin: 0; padding: 9px 14px">앱 비밀번호(권장) — 2단계 인증을 켜지 않았으면 웹메일 비밀번호도 됩니다</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; 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="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><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>
|
||||
<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: #0A5F67">앱 비밀번호로 연결하기를 권합니다</span>
|
||||
<span>지금은 웹메일 비밀번호로도 연결되지만, 2단계 인증을 켜면 다시 연결할 때 막힙니다. 앱 비밀번호는 기기마다 따로 지울 수 있어 잃어버렸을 때도 안전합니다.</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>
|
||||
</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">새 Outlook 을 펼쳤을 때</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">주의 줄은 목록 위에 늘 있다 — 여기서는 함께 보이려고 붙였다</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; 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"><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>
|
||||
<div style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<span>새 Outlook · 휴대폰 Outlook 앱은 메일을 Microsoft 클라우드를 거쳐 받습니다 — 회사 정책에 따라 쓰지 않는 것이 좋습니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul aria-label="새 Outlook" style="list-style: none; margin: 0; padding: 0; border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<li>
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-newoutlook-btn-s2" class="acc" aria-expanded="true" aria-controls="mc-newoutlook-panel-s2" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">새 Outlook</span>
|
||||
<span style="font-size: 12px; color: #667085">Windows 의 새 Outlook — 메일이 Microsoft 클라우드를 거칩니다</span>
|
||||
</span>
|
||||
<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"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
<div id="mc-newoutlook-panel-s2" role="region" aria-labelledby="mc-newoutlook-btn-s2" style="padding: 2px 16px 16px 44px">
|
||||
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<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>[설정](톱니) → [계정] → [메일 계정] → [계정 추가]를 누릅니다.</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>메일 주소를 넣고 [계속] → 공급자에서 「IMAP」을 고릅니다.</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>[고급 설정 표시]를 누르고 받는 · 보내는 서버에 위 설정값을, 비밀번호 칸 둘 다에 앱 비밀번호를 넣습니다.</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">4</span>
|
||||
<span>[계속]을 누르면 메일을 Microsoft 클라우드에 동기화한다는 안내가 나옵니다 — 위 주의를 읽고 정합니다.</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">마지막 차례의 「Microsoft 클라우드에 동기화」 안내는 새 Outlook 이 띄우는 것입니다 — 웹메일은 막지 못합니다.</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>
|
||||
<ul aria-label="썬더버드" style="list-style: none; margin: 0; padding: 0; border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<li>
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-thunderbird-btn-s2" class="acc" aria-expanded="true" aria-controls="mc-thunderbird-panel-s2" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">썬더버드</span>
|
||||
<span style="font-size: 12px; color: #667085">Windows · Mac — 주소와 앱 비밀번호만 넣으면 됩니다</span>
|
||||
</span>
|
||||
<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"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
<div id="mc-thunderbird-panel-s2" role="region" aria-labelledby="mc-thunderbird-btn-s2" style="padding: 2px 16px 16px 44px">
|
||||
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<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>썬더버드에서 [≡] → [새로 만들기] → [기존 메일 계정]을 누릅니다.</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>이름 · 메일 주소 · 비밀번호(앱 비밀번호)를 넣고 [계속]을 누릅니다.</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>메일 주소와 앱 비밀번호만 넣으면 설정을 스스로 찾습니다 — 「IMAP」이 보이면 [완료]를 누릅니다.</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">4</span>
|
||||
<span>찾지 못하면 [수동 설정]에서 위 설정값을 넣습니다.</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">자동 설정 전(지금)에는 찾지 못해 [수동 설정]으로 갑니다 — 4번 차례.</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<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">휴대폰 · 좁은 창 — 콘텐츠 열 360 · 설정값은 이름 위 · 값 아래</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; padding: 16px 0; border: 1px solid #EEF0F3; border-radius: 10px; background: #F8F9FB">
|
||||
<div style="width: 360px; box-sizing: border-box; padding: 16px 16px 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 10px; display: flex; flex-direction: column; gap: 18px">
|
||||
<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">아웃룩 · 썬더버드 · 휴대폰 메일 앱에서 회사 메일을 보는 방법입니다.</p>
|
||||
</div>
|
||||
<section aria-labelledby="mc-setup-title-narrow" style="display: flex; flex-direction: column; gap: 8px">
|
||||
<h2 id="mc-setup-title-narrow" style="margin: 0; font-size: 14px; font-weight: 700">메일 프로그램 설정값</h2>
|
||||
<dl style="margin: 0; box-sizing: border-box; border: 1px solid #EEF0F3; border-radius: 8px">
|
||||
<div style="display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-bottom: 1px solid #EEF0F3">
|
||||
<dt style="font-size: 12px; color: #667085">받는 메일 (IMAP)</dt>
|
||||
<dd style="margin: 0"><strong style="font-weight: 600">mx1.arasystem.it.kr</strong> · 포트 993 · SSL/TLS</dd>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-bottom: 1px solid #EEF0F3">
|
||||
<dt style="font-size: 12px; color: #667085">보내는 메일 (SMTP)</dt>
|
||||
<dd style="margin: 0"><strong style="font-weight: 600">mx1.arasystem.it.kr</strong> · 포트 465 · SSL/TLS</dd>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-bottom: 1px solid #EEF0F3">
|
||||
<dt style="font-size: 12px; color: #667085">사용자 이름</dt>
|
||||
<dd style="margin: 0"><strong style="font-weight: 600">ara.kim@arasystem.it.kr</strong> — 메일 주소 전체</dd>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 1px; padding: 8px 12px">
|
||||
<dt style="font-size: 12px; color: #667085">비밀번호</dt>
|
||||
<dd style="margin: 0">앱 비밀번호 — 웹메일 비밀번호가 아닙니다</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; 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"><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>
|
||||
<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">비밀번호 칸에는 꼭 앱 비밀번호를 넣어 주세요</span>
|
||||
<span>2단계 인증을 켜 두어 웹메일 비밀번호로는 연결되지 않습니다. 프로그램마다 앱 비밀번호를 하나씩 만들어 넣습니다.</span>
|
||||
</div>
|
||||
<a href="SettingsAppPasswords.dc.html" class="notice-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>
|
||||
<section aria-labelledby="mc-steps-title-narrow" style="display: flex; flex-direction: column; gap: 10px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<h2 id="mc-steps-title-narrow" style="margin: 0; font-size: 14px; font-weight: 700">프로그램별 연결 차례</h2>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #667085">쓰는 프로그램을 누르면 차례가 펼쳐집니다.</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; 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"><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>
|
||||
<div style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="display: flex; flex-direction: column; gap: 2px">
|
||||
<span>새 Outlook · 휴대폰 Outlook 앱은 메일을 Microsoft 클라우드를 거쳐 받습니다 — 회사 정책에 따라 쓰지 않는 것이 좋습니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul aria-label="메일 프로그램" style="list-style: none; margin: 0; padding: 0; border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<li style="border-bottom: 1px solid #EEF0F3">
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-outlook-btn-narrow" class="acc" aria-expanded="false" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">아웃룩 (Windows)</span>
|
||||
<span style="font-size: 12px; color: #667085">Microsoft 365 · Outlook 2016 이후의 데스크톱 Outlook</span>
|
||||
</span>
|
||||
<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"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #EEF0F3">
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-newoutlook-btn-narrow" class="acc" aria-expanded="false" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">새 Outlook</span>
|
||||
<span style="font-size: 12px; color: #667085">Windows 의 새 Outlook — 메일이 Microsoft 클라우드를 거칩니다</span>
|
||||
</span>
|
||||
<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"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #EEF0F3">
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-thunderbird-btn-narrow" class="acc" aria-expanded="false" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">썬더버드</span>
|
||||
<span style="font-size: 12px; color: #667085">Windows · Mac — 주소와 앱 비밀번호만 넣으면 됩니다</span>
|
||||
</span>
|
||||
<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"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
</li>
|
||||
<li style="border-bottom: 1px solid #EEF0F3">
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-iphone-btn-narrow" class="acc" aria-expanded="true" aria-controls="mc-iphone-panel-narrow" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">iPhone · iPad</span>
|
||||
<span style="font-size: 12px; color: #667085">기본 메일 앱</span>
|
||||
</span>
|
||||
<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"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
<div id="mc-iphone-panel-narrow" role="region" aria-labelledby="mc-iphone-btn-narrow" style="padding: 2px 16px 16px 44px">
|
||||
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<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>[설정] → [메일] → [계정] → [계정 추가] → [기타] → [메일 계정 추가]를 누릅니다. (iOS 18 은 [설정] → [앱] → [메일])</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>이름 · 메일 주소 · 암호(앱 비밀번호) · 설명을 넣고 [다음]을 누릅니다.</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>「IMAP」을 고르고, 받는 · 보내는 메일 서버의 호스트 이름에 <strong style="font-weight: 600">mx1.arasystem.it.kr</strong>, 사용자 이름에 메일 주소 전체, 암호에 앱 비밀번호를 넣습니다 — 보내는 메일 서버도 「선택 사항」이라 보여도 비우지 않습니다.</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">4</span>
|
||||
<span>[다음] → [저장]을 누릅니다. 포트는 스스로 993 · 465 로 맞춥니다.</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-android-btn-narrow" class="acc" aria-expanded="false" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">안드로이드</span>
|
||||
<span style="font-size: 12px; color: #667085">Gmail 앱 — 다른 계정(IMAP) · 삼성 이메일 앱도 같은 값</span>
|
||||
</span>
|
||||
<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"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">설정 메뉴는 콘텐츠 위로 올라갑니다(지금 설정 셸과 같은 줄바꿈). 펼침 줄의 이름 · 설명이 줄을 바꿔도 누르는 곳은 줄 전체입니다.</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">iPhone · iPad 를 펼쳤을 때</h2>
|
||||
<p style="margin: 0; font-size: 12px; color: #667085">설정 › 메일 › 계정 추가 › 기타</p>
|
||||
</div>
|
||||
<ul aria-label="iPhone · iPad" style="list-style: none; margin: 0; padding: 0; border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<li>
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-iphone-btn-s3" class="acc" aria-expanded="true" aria-controls="mc-iphone-panel-s3" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">iPhone · iPad</span>
|
||||
<span style="font-size: 12px; color: #667085">기본 메일 앱</span>
|
||||
</span>
|
||||
<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"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
<div id="mc-iphone-panel-s3" role="region" aria-labelledby="mc-iphone-btn-s3" style="padding: 2px 16px 16px 44px">
|
||||
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<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>[설정] → [메일] → [계정] → [계정 추가] → [기타] → [메일 계정 추가]를 누릅니다. (iOS 18 은 [설정] → [앱] → [메일])</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>이름 · 메일 주소 · 암호(앱 비밀번호) · 설명을 넣고 [다음]을 누릅니다.</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>「IMAP」을 고르고, 받는 · 보내는 메일 서버의 호스트 이름에 <strong style="font-weight: 600">mx1.arasystem.it.kr</strong>, 사용자 이름에 메일 주소 전체, 암호에 앱 비밀번호를 넣습니다 — 보내는 메일 서버도 「선택 사항」이라 보여도 비우지 않습니다.</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">4</span>
|
||||
<span>[다음] → [저장]을 누릅니다. 포트는 스스로 993 · 465 로 맞춥니다.</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">보내는 메일 서버의 사용자 이름 · 암호를 비우면 받기만 되고 보내기가 막힙니다 — 3번 차례에 적었습니다.</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">Gmail 앱 › 다른 계정(IMAP)</p>
|
||||
</div>
|
||||
<ul aria-label="안드로이드" style="list-style: none; margin: 0; padding: 0; border: 1px solid #E6E8EC; border-radius: 10px; overflow: hidden">
|
||||
<li>
|
||||
<h3 style="margin: 0; font-size: inherit; font-weight: inherit">
|
||||
<button type="button" id="mc-android-btn-s3" class="acc" aria-expanded="true" aria-controls="mc-android-panel-s3" style="width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 12px 6px 14px; border: 0; font: inherit; text-align: left; cursor: pointer">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><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="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
|
||||
<span style="font-weight: 600">안드로이드</span>
|
||||
<span style="font-size: 12px; color: #667085">Gmail 앱 — 다른 계정(IMAP) · 삼성 이메일 앱도 같은 값</span>
|
||||
</span>
|
||||
<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"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
||||
</button>
|
||||
</h3>
|
||||
<div id="mc-android-panel-s3" role="region" aria-labelledby="mc-android-btn-s3" style="padding: 2px 16px 16px 44px">
|
||||
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<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>Gmail 앱에서 프로필 사진 → [다른 계정 추가] → [기타]를 누릅니다.</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>메일 주소를 넣고 [수동 설정] → 「개인(IMAP)」을 고릅니다.</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>비밀번호에 앱 비밀번호를 넣습니다.</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">4</span>
|
||||
<span>받는 서버 · 보내는 서버에 <strong style="font-weight: 600">mx1.arasystem.it.kr</strong>, 포트는 993 · 465, 보안 유형은 「SSL/TLS」를 넣고 [다음]을 누릅니다.</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="margin: 0; font-size: 12.5px; color: #4A5363">휴대폰 Outlook 앱은 주의 줄과 같은 까닭으로 넣지 않았습니다.</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단계 인증 · 앱 비밀번호 · 메일 프로그램 연결 · 로그인 기록. 새 항목 아이콘은 PC · 휴대폰.</li>
|
||||
<li>화면 상수(MAIL_CLIENT_SETTINGS)로만 그립니다 — 앱 비밀번호 화면의 설정값 상자와 같은 값. 2단계 인증 상태는 이미 있는 GET /api/two-factor 로 보고, 받지 못하면 켠 직원의 안내(앱 비밀번호 꼭)로 둡니다.</li>
|
||||
<li>펼침 줄은 52(이름 · 설명 두 줄) · 처음에는 모두 접힘 · 하나를 펼치면 다른 것은 접힙니다. 위 화면은 아웃룩을 펼친 모습입니다.</li>
|
||||
<li>차례는 글만 — 화면 그림은 넣지 않습니다. 맥 메일 · 휴대폰 Outlook 앱은 차례에 넣지 않습니다. 메뉴 이름은 구현 때 실제 앱(한국어판)과 한 번 더 맞춥니다.</li>
|
||||
<li>버튼 이름은 [ ], 고를 것은 「 」 — 12단계 「켜는 차례」와 같은 표기.</li>
|
||||
<li>앱 비밀번호 화면(12단계)의 설정값 상자 아래에 바로가기 한 줄 「프로그램별 연결 방법은 메일 프로그램 연결에서 볼 수 있습니다.」를 더합니다 — 12단계 보드는 그대로 두고 README 에 적었습니다.</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>썬더버드의 「설정을 스스로 찾습니다」와 아웃룩의 자동 설정은 전환 때 autoconfig · autodiscover 주소와 SRV 레코드를 낸 뒤부터 됩니다 — 그 전에는 썬더버드도 [수동 설정]입니다.</li>
|
||||
<li>새 Outlook · 휴대폰 Outlook 앱은 권하지 않음으로 정했습니다(2026-10-31) — 회사가 허용하면 주의 줄을 지웁니다.</li>
|
||||
<li>호스트 mx1.arasystem.it.kr 은 전환 때 다시 봅니다(앱 비밀번호 화면과 같은 상수).</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":3600}}'>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -42,9 +42,13 @@
|
||||
"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": "설정 · 로그인 기록" }
|
||||
"SettingsLoginHistory.dc.html": { "x": 4560, "y": 21880, "w": 1440, "h": 2300, "title": "설정 · 로그인 기록" },
|
||||
"LoginPasswordChange.dc.html": { "x": 0, "y": 25610, "w": 1440, "h": 2900, "title": "로그인 · 새 비밀번호 정하기" },
|
||||
"LoginTwoFactorSetup.dc.html": { "x": 1520, "y": 25610, "w": 1440, "h": 4290, "title": "로그인 · 2단계 인증 켜기(필수)" },
|
||||
"SettingsMailClients.dc.html": { "x": 3040, "y": 25610, "w": 1440, "h": 3600, "title": "설정 · 메일 프로그램 연결" },
|
||||
"MailNoticesCutover.dc.html": { "x": 4560, "y": 25610, "w": 1440, "h": 3780, "title": "알림 · 안내 모음(13단계)" }
|
||||
},
|
||||
"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"],
|
||||
"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", "LoginPasswordChange.dc.html", "LoginTwoFactorSetup.dc.html", "SettingsMailClients.dc.html", "MailNoticesCutover.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 },
|
||||
@@ -56,7 +60,8 @@
|
||||
"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단계 화면 — 대용량 첨부 (쓰기 · 본문 덩이 · 읽기 · 내려받기 화면 · 설정) — 2026-10-30 확정", "kind": "title1", "maxW": 7520 },
|
||||
"phase12": { "x": 0, "y": 21580, "text": "12단계 화면 — 계정 보안(2단계 인증 · 앱 비밀번호 · 로그인 기록) — 2026-10-31 확정", "kind": "title1", "maxW": 6000 }
|
||||
"phase12": { "x": 0, "y": 21580, "text": "12단계 화면 — 계정 보안(2단계 인증 · 앱 비밀번호 · 로그인 기록) — 2026-10-31 확정", "kind": "title1", "maxW": 6000 },
|
||||
"phase13": { "x": 0, "y": 25310, "text": "13단계 화면 — 전환 준비(새 비밀번호 · 2단계 필수 · 메일 프로그램 연결 · 알림) — 2026-10-31 확정", "kind": "title1", "maxW": 6000 }
|
||||
},
|
||||
"designSystems": []
|
||||
}
|
||||
|
||||
+160
-3
@@ -9,7 +9,7 @@
|
||||
- 성공 `{ "success": true, "data": … }` / 실패 `{ "success": false, "error": { "code", "message", "traceId" } }`
|
||||
- 날짜·시각은 ISO 8601 UTC 문자열, 목록은 `{ items, pageInfo }`
|
||||
- 이 단계에서 쓰는 에러 코드: `AUTH_001` `AUTH_002`(클라이언트 전용) `AUTH_003` `AUTH_004` `AUTH_005` `VAL_001` `RES_001` `REQ_001` `FILE_001` `FILE_002` `MAIL_001` `MAIL_002` `MAIL_003` `MAIL_004` `MAIL_005` `MAIL_006` `MAIL_007` `MAIL_008` `MAIL_009` `MAIL_010` `MAIL_011` `MAIL_012` `MAIL_013` `MAIL_014` `MAIL_015` `CONTACT_001` `CONTACT_002` `SYS_001`
|
||||
(11단계 — 4절 "대용량 첨부"가 `FILE_003` ~ `FILE_008` · `MAIL_016` 을 더한다. 12단계 — 5절 "계정 보안"이 `AUTH_006` ~ `AUTH_009` 를 더한다)
|
||||
(11단계 — 4절 "대용량 첨부"가 `FILE_003` ~ `FILE_008` · `MAIL_016` 을 더한다. 12단계 — 5절 "계정 보안"이 `AUTH_006` ~ `AUTH_009` 를, 13단계 — 6절 "전환 준비"가 `AUTH_010` 을 더한다)
|
||||
- **적용 범위: 1단계는 웹(브라우저) 전용이다.** 인증은 HttpOnly 쿠키뿐이고 토큰을 본문으로 주지 않는다.
|
||||
모바일 앱(Flutter)의 인증 방식(토큰 발급·`flutter_secure_storage`)은 앱 착수 때 이 문서에 추가한다.
|
||||
- **배포 형태: 화면과 API 는 같은 주소(origin)를 쓴다.** 운영은 프론트 nginx 가 `/api` 를 백엔드로 넘기고,
|
||||
@@ -2040,7 +2040,7 @@ interface FileUploadCreate {
|
||||
기간 고르기 · 연장, 다시 보내기(다시 올리지 않고 새 링크), 받는 사람 확인 코드 · 비밀번호, 사내만(로그인해야 받기), 받는 사람별 링크 · 기록, 처음 받음 · 만료 전 알림, 미리 보기, 모두 받기(zip), 폴더 올리기,
|
||||
파일 하나만 끊기(끊기는 링크 단위), 설정 목록의 [링크 복사](토큰을 되살릴 수 없다 — 보낸 메일의 덩이에서), 대용량 첨부만 있는 메일의 목록 클립, 링크 → 일반 첨부로 되돌리기,
|
||||
전달 원본 · 임시 저장본의 엔진 첨부를 링크로 바꾸기, 인용 속 원래 링크를 다시 싣기,
|
||||
관리자 화면 · 퇴사자 처리(신고를 받은 링크는 그때까지 운영 스크립트로 끊는다 — 구현하며 정함), 보낸 메일을 지울 때 파일도 지우기, 모바일 앱, 파일 저장소 연동,
|
||||
관리자 화면 · 퇴사자 처리(신고를 받은 링크 끊기 · 퇴사자 잠금은 13단계의 운영 도구 — 6절), 보낸 메일을 지울 때 파일도 지우기, 모바일 앱, 파일 저장소 연동,
|
||||
다른 PC · 다른 브라우저에서 이어 올리기(같은 브라우저에서 같은 파일을 다시 고르면 이어진다).
|
||||
|
||||
### 정한 것 (열린 질문이었던 것 — 2026-10-30 추천대로)
|
||||
@@ -2121,7 +2121,7 @@ interface FileUploadCreate {
|
||||
있으면: 다시 쓴 코드인지 보고 → 코드 실패 한 번을 차지하고 → 엔진 `POST /api/auth`(`accountSecret` + `mfaToken`)에 묻는다.
|
||||
`authenticated` 면 로그인한다(차지한 것을 돌려주고 코드를 2분 기억). `failure` 면 `AUTH_006`.
|
||||
5. 401 → `AUTH_004`.
|
||||
- **지금은 402 를 엔진 장애(503 `MAIL_001`)로 다룬다 — 고친다.** 운영자가 엔진 관리 화면에서 OTP 를 켠 직원은 지금 웹메일에 들어오지 못한다. 4단계 비밀번호 바꾸기도 같다.
|
||||
- **12단계 전에는 402 를 엔진 장애(503 `MAIL_001`)로 다뤘다 — 12단계에서 고쳤다.** 그때는 운영자가 엔진 관리 화면에서 OTP 를 켠 직원이 웹메일에 들어오지 못했고, 4단계 비밀번호 바꾸기도 같았다.
|
||||
- 코드 단계에서도 비밀번호를 엔진 Basic 으로 먼저 보는 까닭: `/api/auth` 의 `failure` 는 비밀번호 틀림과 코드 틀림을 가르지 않는다. 비밀번호를 추측하는 요청이 코드 실패로 세지지 않게 한다.
|
||||
- `twoFactorRequired` 는 비밀번호가 맞았다는 뜻이다(2단계 로그인의 성질 — 코드 없이는 들어오지 못한다). 비밀번호 추측은 1절의 실패 한도가 그대로 막는다.
|
||||
- 엔진 `/api/auth` 가 성공하면 엔진 메모리에 1회용 OAuth 코드가 남는다(쓰지 않으면 10분 뒤 사라진다) — 쓰지 않는다.
|
||||
@@ -2375,3 +2375,160 @@ interface FileUploadCreate {
|
||||
3. 2단계를 켜거나 꺼도 다른 세션을 끊지 않는다 — 로그인 기록 화면에서 따로 끊는다.
|
||||
4. 비밀번호를 바꾸면 앱 비밀번호도 모두 지운다(위 "비밀번호 바꾸기").
|
||||
5. 다른 곳 로그아웃은 바로 적용한다 — 끊은 세션 id 를 가드가 막는다(위 "로그인된 브라우저"). 로그아웃 · 비밀번호 바꾸기의 세션 끊기도 같다.
|
||||
|
||||
---
|
||||
|
||||
## 6. 전환 준비 — 13단계 (2026-10-31 확정)
|
||||
|
||||
> 운영 도구 · 계정 잠금 · 비밀번호 바꾸기 강제 · 2단계 인증 필수 · 받은편지함 알림 · 문의 연락처.
|
||||
> 백업 · 감시 · 휴지통 비우기 시각 · 메일 프로그램 자동 설정 · 관리자 계정 단단히는 인프라 몫이다(mail/README).
|
||||
> 근거: 개발 엔진 실험(2026-10-31) — 계정 막기 변형 표, 비밀번호 만료 동작, 관리자 대리 로그인, 엔진 변경과 웹메일 세션.
|
||||
|
||||
### 공유 계약을 바꾸는 곳 (한데 모음)
|
||||
|
||||
- `POST /api/auth/login`(`signedIn`) · `GET /api/auth/me` · `POST /api/auth/refresh` 응답에 `restriction`(`null` · `passwordChange` · `twoFactorSetup`)과
|
||||
`twoFactorDeadline`(2단계 필수의 유예 중이면 시작일 0시(KST)의 시각 — ISO 8601 UTC, 아니면 `null`)을 더한다.
|
||||
- 제한된 세션으로 다른 API 를 부르면 403 `AUTH_010` 이다.
|
||||
- `GET /api/two-factor` 응답에 `isRequired`(이 직원에게 필수인가) · `deadline`.
|
||||
- 새 공개 API `GET /api/support-contact`(로그인 없음).
|
||||
- 운영 도구(서버 안 명령)는 API 가 아니다 — 아래 "운영 도구".
|
||||
- 에러 코드 `AUTH_010`.
|
||||
|
||||
### 엔진 사실 (이 절이 기대는 것 — 0.16.27)
|
||||
|
||||
- 엔진 계정에는 "끄기" 칸이 없다. 로그인 권한(`authenticate`)을 빼면 비밀번호 · 앱 비밀번호 · 대리 접근(웹메일)이 모두 막히고 메일은 계속 받는다. 되돌리기 쉽다.
|
||||
- 비밀번호 자격의 만료(`expiresAt` 을 지난 날로)는 그 계정의 권한을 비밀번호 바꾸기만으로 줄인다: 본인 Basic 은 200 이지만 권한이 다섯
|
||||
(`authenticate` · `authenticateWithAlias` · `sysAccountPasswordGet` · `sysAccountPasswordUpdate` · `emailReceive`)뿐이고, 본인이 바꾸면 엔진이 만료를 스스로 푼다. 앱 비밀번호는 영향이 없다(자체 만료).
|
||||
- 웹메일(대리 접근)도 세션은 열리지만 메일 메서드가 `forbidden` 이다 — 그대로면 로그인 뒤 메일 오류만 보인다. 그래서 서버가 로그인 때 알아채 새 비밀번호 단계로 보낸다(아래 "비밀번호 바꾸기 강제").
|
||||
- 만료된 동안은 대리 접근으로 메일을 넣거나 앱 비밀번호를 지우는 일도 막힐 것이다(구현 때 확인) — 그래서 운영 도구는 그 일을 만료를 걸기 전에 한다(아래 "운영 도구").
|
||||
- 엔진에서 비밀번호를 바꾸거나 막아도 웹메일 세션은 끊기지 않는다. 갱신이 게이트웨이로 계정이 있는지만 보고, 엔진에는 바뀐 것을 알리는 칸이 없다.
|
||||
- 그래서 운영 도구가 세션을 직접 끊는다.
|
||||
- 엔진에는 2단계 인증을 강제하는 설정이 없다 — 서버 정책으로 둔다.
|
||||
- 대리 접근으로 직원 받은편지함에 메일을 넣을 수 있다(`Email/import`). 안 읽음 · 실시간 알림이 가고, 필터 · 스팸 판정은 거치지 않는다.
|
||||
|
||||
### 제한된 세션
|
||||
|
||||
- 로그인은 성공해 쿠키를 받지만 세션에 제한이 붙는다. 제한은 서버(세션 표)에 있고, 액세스 토큰에도 싣는다.
|
||||
- 제한된 세션으로 부를 수 있는 것
|
||||
- `/api/auth/*`(me · refresh · logout · password · sessions)
|
||||
- `/api/two-factor` · `/api/two-factor/enrollments` · `/api/two-factor/activation`
|
||||
- `/api/support-contact`
|
||||
- 그 밖은 403 `AUTH_010` 이다.
|
||||
- 차례: `passwordChange` 가 먼저, 그다음 `twoFactorSetup`.
|
||||
- 푸는 요청(비밀번호 바꾸기 · 2단계 켜기)이 성공하면 서버가 세션의 제한을 지운다. 클라이언트는 곧바로 `/auth/refresh` 로 새 토큰을 받는다.
|
||||
- 다음 제한이 남아 있으면 그 제한이 붙어 온다.
|
||||
- 새로고침 · 다른 탭에서도 같은 제한이다(서버가 막는다). 화면은 `me` 의 `restriction` 을 보고 로그인 틀의 그 단계로 간다.
|
||||
- 클라이언트는 403 `AUTH_010` 을 받으면 알림 없이 `me` 를 다시 받아 그 제한의 단계로 간다. 제한된 동안은 실시간 알림(`/api/mail-events`)도 열지 않는다 — 제한이 풀린 뒤 연다.
|
||||
|
||||
```jsonc
|
||||
// POST /api/auth/login → 200 + Set-Cookie — 제한된 세션도 쿠키를 받는다
|
||||
{ "status": "signedIn", "email": "ara.kim@arasystem.it.kr", "name": "김아라", "restriction": "passwordChange", "twoFactorDeadline": null }
|
||||
// GET /api/auth/me → 200 — 2단계 필수의 유예 중(시작일 2026-12-01)
|
||||
{ "email": "ara.kim@arasystem.it.kr", "name": "김아라", "restriction": null, "twoFactorDeadline": "2026-11-30T15:00:00.000Z" }
|
||||
```
|
||||
|
||||
### 비밀번호 바꾸기 강제 (`restriction: passwordChange`)
|
||||
|
||||
- 언제: 엔진의 비밀번호가 만료됐을 때다. 운영 도구의 입사 · 비밀번호 재설정이 건다.
|
||||
- 알아채는 법: 로그인 때 본인 자격으로 엔진에 묻는다(권한이 비밀번호 바꾸기뿐인가 — 방법은 구현 때 정한다).
|
||||
- 알아챈 제한은 세션에 남는다 — 갱신은 게이트웨이라 다시 알아채지 못하므로.
|
||||
- 푸는 법: `PUT /api/auth/password` — 지금 비밀번호는 임시 비밀번호, 새 비밀번호, 2단계를 켰으면 `otpCode`.
|
||||
- 성공하면 엔진의 만료가 풀리고 세션 제한을 지운다.
|
||||
- 다른 세션 끊기 · 앱 비밀번호 지우기는 5절 규칙 그대로다.
|
||||
- **클라이언트**: 로그인 직후면 방금 넣은 비밀번호를 화면 메모리(반응형이 아닌 클로저 — 5절 코드 단계와 같다)에서 지금 비밀번호로 쓴다.
|
||||
10분이 지났거나 새로고침 · 다른 탭이면 「임시 비밀번호」 칸을 보인다.
|
||||
- 2단계를 켠 직원은 비밀번호 → 코드 → 이 단계이고, 이 단계에서 코드를 한 번 더 받는다(`otpCode` — 엔진이 비밀번호를 바꿀 때 코드를 요구한다).
|
||||
로그인 때 쓴 코드는 2분 동안 다시 받지 않으므로(5절) 앱의 다음 코드를 넣는다. 서버가 로그인 코드를 기억해 다시 쓰지 않는다 — 새 비밀번호를 치는 사이 코드의 유효 시간(앞뒤 30초)을 지날 수 있다.
|
||||
- 엔진이 만료와 2단계 중 무엇을 먼저 보는지는 구현 때 확인한다.
|
||||
|
||||
### 2단계 인증 필수 (`restriction: twoFactorSetup`)
|
||||
|
||||
- 정책은 서버 설정이고 운영 도구로 바꾼다: 꺼짐 / 켜짐 + 시작일 + 예외 주소. 처음 값은 꺼짐이다.
|
||||
- 시작일 전(유예): 로그인은 그대로다. `twoFactorDeadline` 에 시작일이 오고, 화면이 메일함 위에 안내 줄을 보인다(날짜는 그 1ms 앞 — 시작일 전날, 부재중의 끝나는 날과 같은 규칙).
|
||||
- 시작일부터: 2단계를 켜지 않은 직원(예외 주소 빼고)의 로그인에 `restriction: twoFactorSetup` 이 붙는다. 화면은 로그인 틀의 켜기 단계로 간다.
|
||||
- 로그인은 엔진의 답(402 면 켜짐)으로, 갱신은 정책과 우리 기록(`two_factor_settings`)으로 다시 본다 — 시작일이 지나면 이미 로그인한 세션도 다음 갱신(최대 1시간) 때 제한이 붙는다.
|
||||
- 켜기는 12단계 API(`enrollments` · `activation`) 그대로다. 지금 비밀번호는 위 "클라이언트"와 같은 규칙이다.
|
||||
- 켜면 세션 제한을 지운다. 화면은 받은편지함으로 가며 [앱 비밀번호 만들기] 알림을 띄운다(디자인 README 13단계).
|
||||
- `GET /api/two-factor` 의 `isRequired` · `deadline` 으로 설정 화면도 같은 안내를 보인다. 필수인 직원은 끄기 단추가 없다 — 서버도 400 `VAL_001` 로 거절한다.
|
||||
- 필수인 직원이 휴대폰을 바꿀 때는 관리자가 운영 도구의 「2단계 해제」를 하고, 다음 로그인 때 새 휴대폰으로 켠다(직원이 켜진 채 새 휴대폰을 등록하는 길은 이 단계에 없다).
|
||||
- 메일 프로그램은 앱 비밀번호로 연결한다(12단계 그대로).
|
||||
|
||||
### 문의 연락처 (`GET /api/support-contact`)
|
||||
|
||||
```jsonc
|
||||
// GET /api/support-contact → 200 (로그인 없음)
|
||||
{ "text": "IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it" } // 정하지 않았으면 null
|
||||
```
|
||||
|
||||
- 운영 도구로 바꾼다(서버 설정). 200자 이하 · 한 줄이다.
|
||||
- 화면은 글자로만 보인다(링크 · HTML 없음): 로그인 화면(「비밀번호를 잊으셨나요?」 아래), 코드 단계 · 2단계 켜기(「인증 앱을 쓸 수 없나요?」 아래), 받은편지함 알림 메일의 마지막 줄.
|
||||
정하지 않았으면 지금 글 그대로다(디자인 README 13단계). 잠긴 계정도 비밀번호 틀림과 같은 `AUTH_004` 라 같은 줄로 안내한다.
|
||||
|
||||
### 받은편지함 알림 메일 (시스템 메일)
|
||||
|
||||
- 서버가 대리 접근으로 그 직원의 받은편지함에 넣는다(`Email/import`).
|
||||
- 안 읽음으로, 받은 시각은 지금이다.
|
||||
- 필터 · 스팸 판정을 거치지 않고, 실시간 알림이 간다.
|
||||
- 보낸 사람은 `ARA SYSTEM <postmaster@<MAIL_DOMAIN>>` 이다. 엔진 안이라 SPF · DKIM 과 상관없다.
|
||||
- 보내는 때
|
||||
- 운영 도구의 비밀번호 재설정 · 2단계 해제
|
||||
- 위험 파일 판정 — 11단계에서 미룬 것. 그 파일을 올린 직원에게 보낸다.
|
||||
- 넣기에 실패해도 원래 일은 성공으로 둔다(warn 로그).
|
||||
- 본문은 짧은 HTML(보내는 정화 허용 목록 안) + 같은 글의 텍스트다. 제목 · 문구는 디자인 README 13단계를 그대로 쓴다.
|
||||
- **링크를 넣지 않는다** — 할 일은 메뉴 경로를 글로 적는다(「웹메일 › 설정 › 계정 › 앱 비밀번호」 등). 직원에게 "회사 보안 알림에는 링크가 없다"는 습관을 주어 링크 달린 피싱 메일이 눈에 띄게 한다.
|
||||
- 위험 파일 알림은 파일마다 한 번 — 위험 판정을 처음 기록할 때만 보낸다.
|
||||
|
||||
### 운영 도구 (서버 안 명령)
|
||||
|
||||
- 실행: `sudo docker exec -it <PROJECT_NAME>-backend node dist/cli/ops.js`. 운영 이미지에 들어 있다.
|
||||
- 한국어 메뉴로 묻고, 바뀔 것을 보여 주고, y/N 으로 확인받은 뒤 실행한다.
|
||||
- 엔진 관리 API(관리자 Basic — `MAIL_JMAP_URL`)와 우리 DB · 서비스를 함께 쓴다.
|
||||
- 처음에 묻는 것
|
||||
- 운영자 이름 — 실행 기록에 남긴다.
|
||||
- 관리자 비밀번호 — 저장하지 않는다. 화면에 보이지 않게 넣는다.
|
||||
- 실행 기록 표(`ops_audit_log`): 언제 · 누가 · 명령 · 대상 · 결과. 비밀은 남기지 않는다.
|
||||
- 명령
|
||||
|
||||
| 명령 | 하는 일 |
|
||||
| --- | --- |
|
||||
| 입사 | 주소 · 이름 · 메일함 용량 → 엔진 계정(직원 역할) + 임시 비밀번호(무작위 — 한 번만 보여 줌) + 만료(첫 로그인 때 바꾸기) |
|
||||
| 비밀번호 재설정 | 임시 비밀번호 + 만료, 웹메일 세션 모두 끊기, 앱 비밀번호 지우기, 받은편지함 알림. 2단계는 그대로다(따로 해제) |
|
||||
| 2단계 해제 | 휴대폰 분실 — 엔진 OTP 지우기 + `enabledAt` 정리 + 받은편지함 알림 |
|
||||
| 잠금 | 퇴사 · 털림 — 엔진 `authenticate` 빼기, 웹메일 세션 모두 끊기. 묻고: 그 직원의 공개 링크 끊기, 받는 메일 넘기기(Sieve `redirect :copy`), 자동 응답. 메일은 계속 받는다 |
|
||||
| 잠금 풀기 | `authenticate` 되돌리기. 비밀번호 재설정을 함께 권한다 |
|
||||
| 퇴사 마무리 | 잠긴 계정만. 엔진 계정 지우기(메일 영구 삭제 — 주소를 다시 쳐서 확인) + 우리 DB 의 그 주소 행 정리 — 같은 주소를 다시 쓸 때 섞이지 않게 |
|
||||
| 링크 끊기 | 신고된 공개 링크 주소로 → `revoked_by = operator` |
|
||||
| 공용 주소 | MailingList 만들기 · 구성원 넣기 / 빼기 · 목록(구성원 받은편지함으로 복사) |
|
||||
| 현황 | 직원마다 잠금 · 2단계 · 앱 비밀번호 수 · 마지막 웹메일 로그인 · 메일함 사용량 |
|
||||
| 정책 · 설정 | 2단계 필수(켜기 · 시작일 · 예외), 문의 연락처 |
|
||||
|
||||
- 차례가 있는 명령
|
||||
- 비밀번호 재설정: 앱 비밀번호 지우기 · 알림 메일 넣기(대리 접근) → 엔진에 임시 비밀번호 + 만료 → 웹메일 세션 끊기. 만료 뒤에는 대리 접근 메서드가 막히기 때문이다. 엔진 바꾸기가 실패하면 넣은 알림 메일을 지운다.
|
||||
- 잠금: 받는 메일 넘기기 · 자동 응답(대리 접근으로 Sieve)을 먼저 걸고 → `authenticate` 빼기 → 세션 끊기. 뺀 뒤에는 대리 접근이 막혀 Sieve 를 새로 걸 수 없다(이미 건 Sieve 는 계속 돈다).
|
||||
- 퇴사 마무리: 엔진 계정을 지운 뒤 우리 DB 에서 그 주소의 행을 지운다 — 로그인 기록 · 앱 비밀번호 사용 · 2단계 설정 · 서명 · 설정 · 세션 · 사내 목록 기록 · 대용량 파일 · 링크. 실행 기록(`ops_audit_log`)은 남긴다.
|
||||
- 관리자 계정에서 대리 접근 권한(`impersonate`)을 빼므로(인프라 — mail/README) 도구가 직원의 메일함 · Sieve · 앱 비밀번호를 다룰 때는 웹메일과 같은 게이트웨이 대리 접근을 쓴다. 관리자 Basic 은 계정 관리 API(`x:Account` · `x:MailingList`)에만 쓴다.
|
||||
- **도구로 끊은 세션도 15초 안에 막힌다.** 세션 끊기는 DB 로 하고, 서버는 끊은 세션 기억을 15초마다 DB 에서 채운다(5절의 기억에 더한다).
|
||||
- 잠금은 도구로 한다. 엔진 관리 화면에서 `authenticate` 만 빼면 웹메일 세션이 남는다 — 갱신이 503 `MAIL_001` 을 내며 세션을 그대로 둔다(엔진의 대리 접근 403 을 설정 문제로 본다).
|
||||
|
||||
### 에러 코드 (13단계에 더함)
|
||||
|
||||
| 코드 | HTTP | 상황 | 문구 |
|
||||
| --- | --- | --- | --- |
|
||||
| `AUTH_010` | 403 | 제한된 세션(비밀번호 바꾸기 · 2단계 켜기 전)으로 다른 API | "먼저 비밀번호를 바꾸거나 2단계 인증을 켜 주세요." |
|
||||
|
||||
### 휴지통 · 스팸 30일 · 메일 프로그램 연결
|
||||
|
||||
- 휴지통 · 스팸메일함의 메일은 엔진이 지운다: 그 메일함에 들어간 날부터 30일, 매일 03:00 KST(setup). API 는 없고 화면 안내 줄만 둔다.
|
||||
- 메일 프로그램 연결 화면은 화면 상수(`MAIL_CLIENT_SETTINGS`)로만 그린다. API 는 없다. 2단계 인증 상태는 `GET /api/two-factor` 로 보고, 받지 못하면 켠 직원의 안내(앱 비밀번호 꼭)로 둔다.
|
||||
- 앱 비밀번호 화면(5절)의 설정값 상자 아래에 이 화면으로 가는 바로가기를 둔다.
|
||||
- 새 Outlook · 휴대폰 Outlook 앱은 메일을 Microsoft 클라우드를 거쳐 받으므로 권하지 않는다고 안내한다(회사가 허용하면 그 줄을 지운다).
|
||||
|
||||
### 확장 때 옮길 것
|
||||
|
||||
- 2단계 필수 정책 · 문의 연락처는 DB 라 그대로 맞다.
|
||||
- 끊은 세션 기억은 15초 DB 동기화라 인스턴스를 늘려도 15초 안에 맞는다.
|
||||
|
||||
### 이 단계에서 하지 않는 것
|
||||
|
||||
웹메일 관리자 화면(공통 기반 때), 비밀번호 스스로 재설정(복구 연락처 필요), 직원이 켜진 채 새 휴대폰으로 바꾸기(관리자의 「2단계 해제」로 한다),
|
||||
공용 주소로 보내기 · 공유 메일함(Group), 새 기기 로그인 알림 메일, 관리자 열람 기능, 주소 바꾸기, 모바일 앱.
|
||||
|
||||
Reference in New Issue
Block a user