docs: 앱 1단계 화면을 확정해 디자인 문서에 옮긴다

캔버스에서 2026-11-05 확정한 앱 1단계 보드 다섯(로그인 네 단계 · 메일 목록 · 읽기 · 쓰기 ·
앱 틀과 설정 — 안드로이드 먼저)과 앱 디자인 README 다. 앱 틀은 웹의 전역 앱 레일을 아래 탭 막대로
옮긴 것이고, 파일 저장소 · 캘린더도 같은 모듈 틀에 들어간다. canvas.json 은 원래 꼴(보드마다 한 줄)에
보드 다섯 · 차례 · 노트 하나만 더했다.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-11-06 11:06:01 +09:00
parent fe355f3943
commit bb560d39f9
7 changed files with 1486 additions and 3 deletions
+289
View File
@@ -0,0 +1,289 @@
<!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}
input::placeholder,textarea::placeholder{color:#8A94A3}
</style>
</helmet>
<div style="width: 1784px; height: 956px; box-sizing: border-box; padding: 40px; display: flex; gap: 48px; align-items: flex-start; background: #EEF1F4; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 15px; line-height: 1.5">
<div style="flex: 0 0 390px; order: 1; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">새 메일 · 받는 사람 추천</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<a href="App1MailList.dc.html" aria-label="닫기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></a>
<h1 style="flex: 1 1 auto; min-width: 0; margin: 0; padding-left: 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">새 메일</h1>
<button type="button" aria-label="파일 첨부" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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></button>
<button type="button" aria-label="보내기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0E7C86"><svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
</header>
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto">
<div style="position: relative">
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #0E7C86; box-shadow: inset 0 -1px 0 #0E7C86">
<label for="ca-to" style="flex: 0 0 72px; font-size: 14px; color: #667085">받는 사람</label>
<input id="ca-to" type="text" value="이도" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="ca-to-list" aria-activedescendant="ca-opt-1" autocomplete="off" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26">
<button type="button" aria-label="참조, 숨은참조 펼치기" aria-expanded="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #667085"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
</div>
<ul id="ca-to-list" role="listbox" aria-label="받는 사람 추천" style="position: absolute; left: 0; right: 0; top: 100%; z-index: 2; margin: 0; padding: 6px 0; list-style: none; background: #FFFFFF; border-bottom: 1px solid #E6E8EC; box-shadow: 0 12px 24px rgba(16, 24, 28, 0.14)">
<li id="ca-opt-1" role="option" aria-selected="true" style="display: flex; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 6px 16px; background: #F3F8F8">
<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: 15px; font-weight: 600">이</span>
<span style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
<span style="font-size: 15px; color: #171C26"><strong style="font-weight: 700">이도</strong>윤</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #667085">doyun.lee@arasystem.it.kr</span>
</span>
</li>
<li id="ca-opt-2" role="option" aria-selected="false" style="display: flex; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 6px 16px; background: #FFFFFF">
<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: 15px; font-weight: 600">이</span>
<span style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
<span style="font-size: 15px; color: #171C26"><strong style="font-weight: 700">이도</strong>현</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #667085">dohyun.lee@hanbit-partners.co.kr</span>
</span>
</li>
<li id="ca-opt-3" role="option" aria-selected="false" style="display: flex; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 6px 16px; background: #FFFFFF">
<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: 15px; font-weight: 600">이</span>
<span style="min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
<span style="font-size: 15px; color: #171C26"><strong style="font-weight: 700">이도</strong>연</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #667085">doyeon.lee@arasystem.it.kr</span>
</span>
</li>
</ul>
</div>
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #EEF0F3">
<label for="ca-subject" style="flex: 0 0 72px; font-size: 14px; color: #667085">제목</label>
<input id="ca-subject" type="text" placeholder="제목을 입력해 주세요" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; font-weight: 600">
</div>
<textarea aria-label="본문" placeholder="내용을 입력해 주세요" rows="8" style="display: block; width: 100%; min-height: 240px; box-sizing: border-box; padding: 16px; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 15.5px; line-height: 1.7; color: #1F2733"></textarea>
<div style="margin: 0 16px; padding: 12px 0 16px; border-top: 1px dashed #D0D5DD; display: flex; align-items: flex-start; gap: 4px">
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px">
<span style="font-size: 12.5px; font-weight: 600; color: #667085">서명</span>
<p style="margin: 0; font-size: 14px; line-height: 1.65; color: #4A5363; white-space: pre-line">김아라
경영지원팀 · ARA SYSTEM
02-000-0000</p>
</div>
<button type="button" aria-label="서명 빼기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #667085"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
</div>
</div>
</div>
</div>
<sc-for list="{{ phones }}" as="p" hint-placeholder-count="2">
<div style="flex: 0 0 390px; order: {{ p.order }}; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ p.label }}</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<a href="App1MailList.dc.html" aria-label="닫기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></a>
<h1 style="flex: 1 1 auto; min-width: 0; margin: 0; padding-left: 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">답장</h1>
<button type="button" aria-label="파일 첨부" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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></button>
<button type="button" aria-label="보내기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0E7C86"><svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
</header>
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 72px">
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #EEF0F3">
<label for="{{ p.id }}-to" style="flex: 0 0 72px; font-size: 14px; color: #667085">받는 사람</label>
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; height: 40px; box-sizing: border-box; padding-left: 14px; border-radius: 20px; background: #F2F4F7; font-size: 14.5px; color: #171C26">이도윤<button type="button" aria-label="이도윤 빼기" style="width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4A5363; cursor: pointer"><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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></span>
<input id="{{ p.id }}-to" type="text" autocomplete="off" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; flex-basis: 40px">
<button type="button" aria-label="{{ p.ccLabel }}" aria-expanded="{{ p.ccStr }}" onClick="{{ p.toggleCc }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #667085">
<sc-if value="{{ p.ccOpen }}" hint-placeholder-val="{{ true }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"></polyline></svg></sc-if>
<sc-if value="{{ p.ccClosed }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></sc-if>
</button>
</div>
<sc-if value="{{ p.ccOpen }}" hint-placeholder-val="{{ true }}">
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #EEF0F3">
<label for="{{ p.id }}-cc" style="flex: 0 0 72px; font-size: 14px; color: #667085">참조</label>
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; height: 40px; box-sizing: border-box; padding-left: 14px; border-radius: 20px; background: #F2F4F7; font-size: 14.5px; color: #171C26">박준호<button type="button" aria-label="박준호 빼기" style="width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4A5363; cursor: pointer"><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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></span>
<input id="{{ p.id }}-cc" type="text" autocomplete="off" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; flex-basis: 40px">
</div>
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #EEF0F3">
<label for="{{ p.id }}-bcc" style="flex: 0 0 72px; font-size: 14px; color: #667085">숨은참조</label>
<input id="{{ p.id }}-bcc" type="text" autocomplete="off" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26">
</div>
</sc-if>
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #EEF0F3">
<label for="{{ p.id }}-subject" style="flex: 0 0 72px; font-size: 14px; color: #667085">제목</label>
<input id="{{ p.id }}-subject" type="text" value="Re: 유지보수 계약 갱신 건" style="flex: 1 1 120px; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; font-weight: 600">
</div>
<section aria-labelledby="{{ p.id }}-att" style="padding: 10px 16px 12px; border-bottom: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 8px">
<div style="display: flex; align-items: baseline; justify-content: space-between; gap: 8px">
<h2 id="{{ p.id }}-att" style="margin: 0; font-size: 13px; font-weight: 600; color: #4A5363">첨부 2개</h2>
<span style="font-size: 12.5px; color: #667085">파일당 최대 20MB · 합계 25MB</span>
</div>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
<li style="display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 10px; border: 1px solid #E6E8EC; border-radius: 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: 8px; background: #F2F4F7; color: #4A5363"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500">회신_검토의견.docx</span>
<span style="font-size: 12.5px; color: #667085">38 KB</span>
</div>
<button type="button" aria-label="회신_검토의견.docx 빼기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #4A5363"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
</li>
<li style="display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 4px 4px 4px 10px; border: 1px solid #E6E8EC; border-radius: 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: 8px; background: #F2F4F7; color: #4A5363"><svg width="18" height="18" 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="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; line-height: 1.35">
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500">현장사진_1104.jpg</span>
<span style="display: flex; align-items: center; gap: 8px">
<span role="progressbar" aria-label="현장사진_1104.jpg 올리는 중" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="flex: 1 1 auto; display: block; height: 4px; border-radius: 2px; background: #E4E7EC; overflow: hidden"><span style="display: block; width: 40%; height: 100%; border-radius: 2px; background: #0E7C86"></span></span>
<span style="flex: 0 0 auto; font-size: 12.5px; color: #0A5F67; font-variant-numeric: tabular-nums">올리는 중 40%</span>
</span>
</div>
<button type="button" aria-label="현장사진_1104.jpg 올리기 취소" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #4A5363"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
</li>
</ul>
</section>
<textarea aria-label="본문" rows="5" style="display: block; width: 100%; min-height: 150px; box-sizing: border-box; padding: 16px; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 15.5px; line-height: 1.7; color: #1F2733">이도윤님,
보내 주신 초안 잘 받았습니다.
조건 그대로 진행해 주세요. 다음 주 월요일 서명 일정도 좋습니다.</textarea>
<div style="margin: 0 16px; padding: 12px 0 16px; border-top: 1px dashed #D0D5DD; display: flex; align-items: flex-start; gap: 4px">
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px">
<span style="font-size: 12.5px; font-weight: 600; color: #667085">서명</span>
<p style="margin: 0; font-size: 14px; line-height: 1.65; color: #4A5363; white-space: pre-line">김아라
경영지원팀 · ARA SYSTEM
02-000-0000</p>
</div>
<button type="button" aria-label="서명 빼기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #667085"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
</div>
<button type="button" aria-expanded="{{ p.quoteStr }}" onClick="{{ p.toggleQuote }}" style="margin: 4px 16px 12px; width: calc(100% - 32px); display: flex; align-items: center; gap: 8px; min-height: 56px; box-sizing: border-box; padding: 6px 4px 6px 14px; border: 1px solid #E6E8EC; border-radius: 10px; background: #F8F9FB; font: inherit; color: inherit; text-align: left; cursor: pointer">
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.4">
<span style="font-size: 14px; font-weight: 600; color: #344054">원본 메일</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #667085">이도윤 · 11월 5일 (목) 오전 10:42</span>
</span>
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; width: 40px; justify-content: center; color: #667085">
<sc-if value="{{ p.quoteOpen }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"></polyline></svg></sc-if>
<sc-if value="{{ p.quoteClosed }}" hint-placeholder-val="{{ true }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></sc-if>
</span>
</button>
<sc-if value="{{ p.quoteOpen }}" hint-placeholder-val="{{ false }}">
<blockquote style="margin: 0 16px 24px; padding: 0 0 0 14px; border-left: 2px solid #D0D5DD; display: flex; flex-direction: column; gap: 10px; color: #4A5363">
<span style="font-size: 12.5px; font-weight: 700">원본 메일</span>
<dl style="margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 10px; font-size: 13px; line-height: 1.5">
<dt style="color: #667085">보낸 사람</dt><dd style="margin: 0; overflow-wrap: anywhere">이도윤 &lt;doyun.lee@arasystem.it.kr&gt;</dd>
<dt style="color: #667085">날짜</dt><dd style="margin: 0">2026년 11월 5일 (목) 오전 10:42</dd>
<dt style="color: #667085">제목</dt><dd style="margin: 0">Re: 유지보수 계약 갱신 건</dd>
</dl>
<p style="margin: 0; font-size: 14px; line-height: 1.7; white-space: pre-line">김아라님, 안녕하세요.
말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다.
기간은 1년이고, 단가는 작년과 같습니다.
이번 주 안에 회신 주시면 다음 주 월요일에 서명하겠습니다.
이도윤 드림</p>
</blockquote>
</sc-if>
</div>
<sc-if value="{{ p.undone }}" hint-placeholder-val="{{ false }}">
<div role="status" style="position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 12px 16px; border-radius: 10px; background: #0B3640; color: #FFFFFF; font-size: 14.5px; line-height: 1.5; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">보내기를 취소했습니다. 쓰던 메일로 돌아왔습니다.</div>
</sc-if>
</div>
</div>
</sc-for>
<div style="flex: 0 0 390px; order: 3; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">보낸 뒤 (답장을 시작한 읽기 화면으로)</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; background: #FFFFFF">
<a href="App1MailList.dc.html" aria-label="목록으로" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>
<span style="flex: 1 1 auto"></span>
<button type="button" aria-label="삭제" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></button>
<button type="button" aria-label="더 보기" aria-haspopup="menu" aria-expanded="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="5" r="1.3" fill="currentColor"></circle><circle cx="12" cy="12" r="1.3" fill="currentColor"></circle><circle cx="12" cy="19" r="1.3" fill="currentColor"></circle></svg></button>
</header>
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 72px">
<article aria-labelledby="cc-subject">
<h1 id="cc-subject" style="margin: 0; padding: 6px 20px 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">Re: 유지보수 계약 갱신 건</h1>
<div style="display: flex; gap: 12px; padding: 14px 20px 0">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">이</span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
<div style="display: flex; align-items: baseline; gap: 8px; padding-top: 1px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600">이도윤</span>
<span style="flex: 0 0 auto; font-size: 12.5px; color: #667085; font-variant-numeric: tabular-nums">오전 10:42</span>
</div>
<button type="button" aria-expanded="false" style="align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin: -10px 0 -6px -8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #4A5363; font: inherit; font-size: 13.5px; cursor: pointer"><span>받는 사람 나 외 1명</span><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"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
</div>
</div>
<div style="padding: 16px 20px 20px; font-size: 15px; line-height: 1.75; color: #1F2733; white-space: pre-line">김아라님, 안녕하세요.
말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다.
기간은 1년이고, 단가는 작년과 같습니다.
이번 주 안에 회신 주시면 다음 주 월요일에 서명하겠습니다.
이도윤 드림</div>
<section aria-labelledby="cc-att" style="margin: 0 16px 24px; padding-top: 16px; border-top: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 8px">
<h2 id="cc-att" style="margin: 0 4px; font-size: 13px; font-weight: 600; color: #4A5363">첨부 파일 2개</h2>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
<li style="display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 8px 4px 8px 12px; border: 1px solid #E6E8EC; border-radius: 12px">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500">유지보수_계약서_수정본.docx</span>
<span style="font-size: 12.5px; color: #667085">52 KB</span>
</div>
<button type="button" aria-label="유지보수_계약서_수정본.docx 받기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg></button>
</li>
<li style="display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 8px 4px 8px 12px; border: 1px solid #E6E8EC; border-radius: 12px">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500">견적서_2026.pdf</span>
<span style="font-size: 12.5px; color: #667085">1.2 MB</span>
</div>
<button type="button" aria-label="견적서_2026.pdf 받기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg></button>
</li>
</ul>
</section>
</article>
</div>
<div role="toolbar" aria-label="답장과 전달" style="flex: 0 0 auto; display: flex; height: 64px; border-top: 1px solid #E6E8EC; background: #FFFFFF">
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg><span>답장</span></a>
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 17 2 12 7 7"></polyline><polyline points="12 17 7 12 12 7"></polyline><path d="M22 18v-2a4 4 0 0 0-4-4H7"></path></svg><span>전체 답장</span></a>
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg><span>전달</span></a>
</div>
<div role="status" style="position: absolute; left: 12px; right: 12px; bottom: 76px; border-radius: 10px; background: #0B3640; color: #FFFFFF; overflow: hidden; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
<div style="display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 2px 4px 2px 16px">
<span style="flex: 1 1 auto; min-width: 0; font-size: 14.5px">메일을 보냈습니다.</span>
<button type="button" style="flex: 0 0 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #9ED6DB; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer">보내기 취소</button>
</div>
<span aria-hidden="true" style="display: block; height: 3px; background: rgba(255, 255, 255, 0.18)"><span style="display: block; width: 62%; height: 100%; background: #7FD3DA"></span></span>
</div>
</div>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1784,"height":956}}'>
class Component extends DCLogic {
state = { cc: true, quote: false };
renderVals() {
const st = this.state;
const noop = () => {};
const make = (live) => {
const ccOpen = live ? st.cc : true;
const quoteOpen = live ? st.quote : false;
return {
id: live ? 'cb' : 'cd',
order: live ? '2' : '4',
label: live ? '답장 · 참조 펼침 · 첨부 · 원본 접힘' : '보내기 취소한 뒤',
undone: !live,
ccOpen: ccOpen,
ccClosed: !ccOpen,
ccStr: ccOpen ? 'true' : 'false',
ccLabel: ccOpen ? '참조, 숨은참조 접기' : '참조, 숨은참조 펼치기',
quoteOpen: quoteOpen,
quoteClosed: !quoteOpen,
quoteStr: quoteOpen ? 'true' : 'false',
toggleCc: live ? () => this.setState({ cc: !st.cc }) : noop,
toggleQuote: live ? () => this.setState({ quote: !st.quote }) : noop,
};
};
return {
phones: [make(true), make(false)],
};
}
}
</script>
</body>
</html>
+259
View File
@@ -0,0 +1,259 @@
<!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}
input::placeholder{color:#8A94A3}
.pwbox:focus-within{outline:2px solid #0E7C86;outline-offset:2px}
.pwbox input:focus-visible{outline:none}
</style>
</helmet>
<div style="width: 908px; height: 1028px; box-sizing: border-box; padding: 40px; display: flex; flex-direction: column; gap: 24px; background: #EEF1F4; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 15px; line-height: 1.5">
<div role="group" aria-label="로그인 단계 고르기" style="display: flex; gap: 8px; height: 48px">
<sc-for list="{{ steps }}" as="s" hint-placeholder-count="4">
<button type="button" aria-pressed="{{ s.pressed }}" onClick="{{ s.pick }}" style="flex: 1 1 0; min-width: 0; min-height: 48px; box-sizing: border-box; padding: 0 12px; border: 1px solid {{ s.border }}; border-radius: 10px; background: {{ s.bg }}; color: {{ s.fg }}; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">{{ s.label }}</button>
</sc-for>
</div>
<div style="display: flex; gap: 48px; align-items: flex-start">
<sc-for list="{{ phones }}" as="ph" hint-placeholder-count="2">
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ ph.label }}</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<sc-if value="{{ ph.isStep1 }}" hint-placeholder-val="{{ true }}">
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column">
<section aria-label="ARA SYSTEM 소개" style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 18px; padding: 36px 24px 28px; background: #0B3640">
<img src="/_blob/3a2f4115a8f90207faa7d3a51cd9aec2" alt="ARA SYSTEM" width="150" height="72" style="display: block; width: 150px; height: auto">
<div style="display: flex; flex-direction: column; gap: 6px">
<p style="margin: 0; font-size: 21px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF">사내 업무를 한 계정으로</p>
<p style="margin: 0; font-size: 14px; line-height: 1.6; color: #A3C2C6">메일부터 시작해 캘린더와 파일 저장소까지 같은 계정으로 이어집니다.</p>
</div>
</section>
<main style="display: flex; flex-direction: column; gap: 20px; padding: 28px 20px 32px">
<div style="display: flex; flex-direction: column; gap: 4px">
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">로그인</h1>
<p style="margin: 0; font-size: 14.5px; color: #4A5363">회사 메일 주소(@arasystem.it.kr)로 로그인해 주세요.</p>
</div>
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
<p id="err-login-alert" role="alert" style="display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 10px; background: #FEF3F2; color: #B42318; font-size: 14px; line-height: 1.5">
<svg width="18" height="18" 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: 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>
</sc-if>
<form style="display: flex; flex-direction: column; gap: 16px; margin: 0">
<div style="display: flex; flex-direction: column; gap: 6px">
<label for="{{ ph.id }}-email" style="font-size: 13.5px; font-weight: 600; color: #344054">메일 주소</label>
<sc-if value="{{ ph.isDefault }}" hint-placeholder-val="{{ true }}">
<input id="ok-email" type="email" inputmode="email" autocomplete="username" placeholder="name@arasystem.it.kr" style="height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #8A94A3; border-radius: 10px; font: inherit; font-size: 16px; color: #171C26; background: #FFFFFF">
</sc-if>
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
<input id="err-email" type="email" inputmode="email" autocomplete="username" value="ara.kim@arasystem.it.kr" aria-invalid="true" aria-describedby="err-login-alert" style="height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #B42318; border-radius: 10px; font: inherit; font-size: 16px; color: #171C26; background: #FFFFFF; box-shadow: 0 0 0 1px #B42318">
</sc-if>
</div>
<div style="display: flex; flex-direction: column; gap: 6px">
<label for="{{ ph.id }}-password" style="font-size: 13.5px; font-weight: 600; color: #344054">비밀번호</label>
<div class="pwbox" style="display: flex; align-items: center; height: 52px; box-sizing: border-box; padding-left: 14px; border: 1px solid {{ ph.credBorder }}; border-radius: 10px; background: #FFFFFF; box-shadow: {{ ph.credShadow }}">
<input id="{{ ph.id }}-password" type="password" autocomplete="current-password" placeholder="비밀번호 입력" aria-invalid="{{ ph.invalidStr }}" style="flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #171C26">
<button type="button" aria-label="비밀번호 보기" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #4A5363; cursor: pointer">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
</button>
</div>
</div>
<button type="button" onClick="{{ ph.next }}" style="display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; border: 0; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer">로그인</button>
</form>
<p style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #667085; word-break: keep-all">비밀번호를 잊으셨나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
</main>
</div>
</sc-if>
<sc-if value="{{ ph.isLater }}" hint-placeholder-val="{{ false }}">
<div style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 56px; box-sizing: border-box; padding: 0 6px 0 20px; background: #0B3640">
<img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
<button type="button" onClick="{{ ph.restart }}" style="min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #9ED6DB; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">다른 계정으로 로그인</button>
</div>
</sc-if>
<sc-if value="{{ ph.isStep2 }}" hint-placeholder-val="{{ false }}">
<main style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 28px 20px 32px">
<div style="display: flex; flex-direction: column; gap: 10px">
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">2단계 인증</h1>
<p style="margin: 0; font-size: 14.5px; color: #4A5363">비밀번호를 확인했습니다. 휴대폰 인증 앱에 표시된 코드를 넣어 주세요.</p>
<span style="align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; padding: 0 14px 0 10px; border-radius: 18px; background: #F2F4F7; color: #344054; font-size: 14px">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.9" 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="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">ara.kim@arasystem.it.kr</span>
</span>
</div>
<div style="display: flex; flex-direction: column; gap: 6px">
<label for="{{ ph.id }}-code" style="font-size: 13.5px; font-weight: 600; color: #344054">인증 앱에 표시된 6자리 코드</label>
<input id="{{ ph.id }}-code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" aria-invalid="{{ ph.invalidStr }}" aria-describedby="{{ ph.codeDesc }}" style="height: 56px; box-sizing: border-box; padding: 0 16px; border: 1px solid {{ ph.credBorder }}; border-radius: 10px; font: inherit; font-size: 22px; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; color: #171C26; background: #FFFFFF; box-shadow: {{ ph.credShadow }}">
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
<p id="err-code-msg" style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #B42318">코드가 올바르지 않습니다. 휴대폰의 날짜와 시간이 자동으로 맞춰지도록 설정되어 있는지 확인해 주세요.</p>
</sc-if>
</div>
<a href="App1MailList.dc.html" style="display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font-size: 15.5px; font-weight: 600; text-decoration: none">확인</a>
<p style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #667085; word-break: keep-all">인증 앱을 쓸 수 없나요?<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: 13px; line-height: 1.6; color: #667085; word-break: keep-all">Outlook이나 휴대폰 기본 메일 앱 같은 다른 메일 프로그램은 이 코드를 묻지 않습니다. 웹메일의 [설정] → [앱 비밀번호]에서 만든 비밀번호로 연결해 주세요.</p>
</main>
</sc-if>
<sc-if value="{{ ph.isStep3 }}" hint-placeholder-val="{{ false }}">
<main style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 28px 20px 32px">
<div style="display: flex; flex-direction: column; gap: 10px">
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">새 비밀번호를 정해 주세요</h1>
<p style="margin: 0; font-size: 14.5px; color: #4A5363">관리자가 정한 임시 비밀번호로 로그인했습니다. 메일을 쓰려면 먼저 새 비밀번호를 정해 주세요.</p>
<span style="align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; padding: 0 14px 0 10px; border-radius: 18px; background: #F2F4F7; color: #344054; font-size: 14px">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.9" 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="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">ara.kim@arasystem.it.kr</span>
</span>
</div>
<form style="display: flex; flex-direction: column; gap: 16px; margin: 0">
<div style="display: flex; flex-direction: column; gap: 6px">
<label for="{{ ph.id }}-next" style="font-size: 13.5px; font-weight: 600; color: #344054">새 비밀번호</label>
<div class="pwbox" style="display: flex; align-items: center; height: 52px; box-sizing: border-box; padding-left: 14px; border: 1px solid #8A94A3; border-radius: 10px; background: #FFFFFF">
<sc-if value="{{ ph.isDefault }}" hint-placeholder-val="{{ true }}">
<input id="ok-next" type="password" autocomplete="new-password" aria-describedby="ok-next-hint" style="flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #171C26">
</sc-if>
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
<input id="err-next" type="password" autocomplete="new-password" value="arasystem2026" aria-describedby="err-next-hint" style="flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: transparent; font: inherit; font-size: 16px; color: #171C26">
</sc-if>
<button type="button" aria-label="새 비밀번호 보기" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #4A5363; cursor: pointer">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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="{{ ph.id }}-next-hint" style="margin: 0; font-size: 13px; line-height: 1.55; color: #667085">8자 이상이고 임시 비밀번호와 달라야 합니다. 영문, 숫자, 기호를 섞으면 더 안전합니다.</p>
</div>
<div style="display: flex; flex-direction: column; gap: 6px">
<label for="{{ ph.id }}-confirm" style="font-size: 13.5px; font-weight: 600; color: #344054">새 비밀번호 확인</label>
<sc-if value="{{ ph.isDefault }}" hint-placeholder-val="{{ true }}">
<input id="ok-confirm" type="password" autocomplete="new-password" style="height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #8A94A3; border-radius: 10px; font: inherit; font-size: 16px; color: #171C26; background: #FFFFFF">
</sc-if>
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
<input id="err-confirm" type="password" autocomplete="new-password" value="arasystem2062" aria-invalid="true" aria-describedby="err-confirm-msg" style="height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #B42318; border-radius: 10px; font: inherit; font-size: 16px; color: #171C26; background: #FFFFFF; box-shadow: 0 0 0 1px #B42318">
<p id="err-confirm-msg" style="margin: 0; font-size: 13.5px; color: #B42318">새 비밀번호가 서로 다릅니다.</p>
</sc-if>
</div>
<button type="button" onClick="{{ ph.next }}" style="display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; border: 0; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer">비밀번호 바꾸고 계속</button>
</form>
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">아웃룩 같은 메일 프로그램을 연결해 두었다면 비밀번호를 바꾼 뒤 다시 연결해 주세요.</p>
</main>
</sc-if>
<sc-if value="{{ ph.isStep4 }}" hint-placeholder-val="{{ false }}">
<main style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 24px 20px 32px">
<div style="display: flex; flex-direction: column; gap: 10px">
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">2단계 인증을 켜 주세요</h1>
<p style="margin: 0; font-size: 14.5px; color: #4A5363">회사 정책에 따라 로그인할 때 휴대폰 인증 앱의 코드도 확인합니다. 지금 켜면 바로 메일로 이어집니다.</p>
<span style="align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; padding: 0 14px 0 10px; border-radius: 18px; background: #F2F4F7; color: #344054; font-size: 14px">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.9" 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="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">ara.kim@arasystem.it.kr</span>
</span>
</div>
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px">
<li style="display: flex; gap: 12px">
<span aria-hidden="true" style="flex: 0 0 18px; font-size: 16px; line-height: 1.4; font-weight: 700; color: #0E7C86">1</span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px">
<div style="display: flex; flex-direction: column; gap: 4px">
<h2 style="margin: 0; font-size: 15.5px; line-height: 1.4; font-weight: 650">인증 앱에 추가해 주세요</h2>
<p style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #4A5363">이 휴대폰의 인증 앱에 바로 추가합니다. 앱이 없으면 Google Authenticator나 Microsoft Authenticator를 먼저 설치해 주세요.</p>
</div>
<button type="button" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid #0E7C86; border-radius: 10px; background: #FFFFFF; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
<span>인증 앱에 추가</span>
</button>
<sc-if value="{{ ph.isError }}" hint-placeholder-val="{{ false }}">
<p role="alert" style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #B42318">이 휴대폰에서 인증 앱을 찾지 못했습니다. 인증 앱을 설치한 뒤 다시 눌러 주세요. 아래 키를 직접 입력해도 됩니다.</p>
</sc-if>
<div style="display: flex; flex-direction: column; gap: 6px; padding-top: 2px">
<span style="font-size: 13px; font-weight: 600; color: #344054">추가되지 않으면 이 키를 인증 앱에 직접 입력해 주세요</span>
<div style="display: flex; align-items: center; gap: 4px; padding: 4px 2px 4px 12px; border: 1px solid #E6E8EC; border-radius: 10px; background: #F8F9FB">
<span style="flex: 1 1 auto; min-width: 0; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 14px; line-height: 1.65; letter-spacing: 0.03em; color: #171C26; white-space: nowrap">K7QF 2M4X HB6R TZ3N<br>PW5C YL7D JQ2V MGAS</span>
<button type="button" aria-label="키 복사" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #0E7C86; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
<span>복사</span>
</button>
</div>
<p style="margin: 0; font-size: 12.5px; line-height: 1.5; color: #667085; word-break: keep-all">앱에는 ‘ARA SYSTEM (ara.kim@arasystem.it.kr)’로 저장됩니다.</p>
</div>
</div>
</li>
<li style="display: flex; gap: 12px">
<span aria-hidden="true" style="flex: 0 0 18px; font-size: 16px; line-height: 1.4; font-weight: 700; color: #0E7C86">2</span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px">
<label for="{{ ph.id }}-setup-code" style="font-size: 15.5px; line-height: 1.4; font-weight: 650">앱에 표시된 6자리 코드</label>
<p id="{{ ph.id }}-setup-code-hint" style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #4A5363">인증 앱에서 코드를 복사해 와서 붙여 넣어도 됩니다.</p>
<input id="{{ ph.id }}-setup-code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" aria-describedby="{{ ph.id }}-setup-code-hint" style="height: 56px; box-sizing: border-box; margin-top: 2px; padding: 0 16px; border: 1px solid #8A94A3; border-radius: 10px; font: inherit; font-size: 22px; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; color: #171C26; background: #FFFFFF">
</div>
</li>
</ol>
<a href="App1MailList.dc.html" style="display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font-size: 15.5px; font-weight: 600; text-decoration: none">켜고 계속</a>
<p style="margin: 0; font-size: 13.5px; line-height: 1.55; color: #667085; word-break: keep-all">인증 앱을 쓸 수 없나요?<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: 13px; line-height: 1.6; color: #667085; word-break: keep-all">Outlook이나 휴대폰 기본 메일 앱 같은 다른 메일 프로그램은 이 코드를 묻지 않습니다. 켠 뒤에는 웹메일의 [설정] → [앱 비밀번호]에서 만든 비밀번호로 연결해 주세요.</p>
</main>
</sc-if>
</div>
</div>
</sc-for>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"step":{"editor":"enum","options":["주소와 비밀번호","2단계 인증 코드","새 비밀번호 정하기","2단계 인증 켜기"],"default":"주소와 비밀번호"},"$preview":{"width":908,"height":1028}}'>
class Component extends DCLogic {
state = { step: null };
renderVals() {
const NAMES = ['주소와 비밀번호', '2단계 인증 코드', '새 비밀번호 정하기', '2단계 인증 켜기'];
const ERRORS = ['비밀번호가 틀렸을 때', '코드가 틀렸을 때', '확인 칸이 다를 때', '인증 앱을 찾지 못했을 때'];
const fromProp = NAMES.indexOf(this.props.step ?? NAMES[0]);
const step = this.state.step ?? (fromProp < 0 ? 0 : fromProp);
const go = (n) => () => this.setState({ step: n });
const noop = () => {};
const steps = NAMES.map((label, i) => ({
label: label,
pressed: i === step ? 'true' : 'false',
pick: go(i),
bg: i === step ? '#E3F2F3' : '#FFFFFF',
fg: i === step ? '#0A5F67' : '#344054',
border: i === step ? '#0E7C86' : '#D0D5DD',
}));
// 1단계 [로그인] → 코드 단계, 3단계 [비밀번호 바꾸고 계속] → 2단계 인증 켜기
const nextOf = { 0: 1, 2: 3 };
const phones = [false, true].map((isError) => {
// 오류 칸의 빨간 테두리는 1단계(주소 · 비밀번호)와 2단계(코드)에서만 쓴다
const redField = isError && (step === 0 || step === 1);
return {
id: isError ? 'err' : 'ok',
label: NAMES[step] + ' · ' + (isError ? ERRORS[step] : '기본'),
isError: isError,
isDefault: !isError,
isStep1: step === 0,
isStep2: step === 1,
isStep3: step === 2,
isStep4: step === 3,
isLater: step !== 0,
credBorder: redField ? '#B42318' : '#8A94A3',
credShadow: redField ? '0 0 0 1px #B42318' : 'none',
invalidStr: redField ? 'true' : 'false',
codeDesc: isError && step === 1 ? 'err-code-msg' : undefined,
next: isError || nextOf[step] === undefined ? noop : go(nextOf[step]),
restart: go(0),
};
});
return { steps: steps, phones: phones };
}
}
</script>
</body>
</html>
+355
View File
@@ -0,0 +1,355 @@
<!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}
input::placeholder,textarea::placeholder{color:#8A94A3}
</style>
</helmet>
<div style="width: 2222px; height: 956px; box-sizing: border-box; padding: 40px; display: flex; gap: 48px; align-items: flex-start; background: #EEF1F4; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 15px; line-height: 1.5">
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">받은편지함</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<sc-if value="{{ selecting }}" hint-placeholder-val="{{ false }}">
<div role="toolbar" aria-label="고른 메일" style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #E3EEEF; background: #F3F8F8">
<button type="button" aria-label="선택 해제" onClick="{{ clear }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
<span style="flex: 1 1 auto; min-width: 0; padding-left: 4px; font-size: 17px; font-weight: 700; color: #0A5F67">{{ pickedText }}</span>
<button type="button" aria-label="읽음 표시" onClick="{{ markRead }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"></path><path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"></path></svg></button>
<button type="button" aria-label="중요 표시" onClick="{{ flagPicked }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
<button type="button" aria-label="이동" onClick="{{ noop }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><line x1="8" y1="13.5" x2="15" y2="13.5"></line><polyline points="12.5 11 15 13.5 12.5 16"></polyline></svg></button>
<button type="button" aria-label="삭제" onClick="{{ removePicked }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></button>
</div>
</sc-if>
<sc-if value="{{ notSelecting }}" hint-placeholder-val="{{ true }}">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
<span style="font-size: 12.5px; color: #667085">{{ unreadText }}</span>
</div>
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
</header>
</sc-if>
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 96px">
<sc-for list="{{ rowsLive }}" as="r" hint-placeholder-count="8">
<li style="border-bottom: 1px solid #F2F4F7; background: {{ r.bg }}">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<button type="button" aria-label="{{ r.pickLabel }}" aria-pressed="{{ r.pressedStr }}" onClick="{{ r.toggle }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer">
<sc-if value="{{ r.picked }}" hint-placeholder-val="{{ false }}">
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="stroke-width: 2.6"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</sc-if>
<sc-if value="{{ r.unpicked }}" hint-placeholder-val="{{ true }}">
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">{{ r.initial }}</span>
</sc-if>
</button>
<a href="App1Reader.dc.html" onContextMenu="{{ r.longPress }}" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
<span style="display: flex; align-items: baseline; gap: 8px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: {{ r.fw }}; color: #171C26">{{ r.who }}</span>
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums">{{ r.time }}</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" 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></sc-if>
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><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></sc-if>
</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
</a>
</div>
</li>
</sc-for>
</ul>
<sc-if value="{{ notSelecting }}" hint-placeholder-val="{{ true }}">
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: {{ fabBottom }}; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
<a href="#" aria-current="page" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: #E3F2F3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></a>
<a href="App1Shell.dc.html" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></a>
</nav>
</sc-if>
<sc-if value="{{ hasToast }}" hint-placeholder-val="{{ false }}">
<div role="status" style="position: absolute; left: 12px; right: 12px; bottom: 84px; display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 2px 4px 2px 16px; border-radius: 10px; background: #0B3640; color: #FFFFFF; font-size: 14.5px; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
<span style="flex: 1 1 auto; min-width: 0">{{ toastText }}</span>
<button type="button" onClick="{{ undo }}" style="flex: 0 0 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #9ED6DB; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer">되돌리기</button>
</div>
</sc-if>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">메일함 서랍</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
<span style="font-size: 12.5px; color: #667085">안 읽은 메일 3통</span>
</div>
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
</header>
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 96px">
<sc-for list="{{ rowsStatic }}" as="r" hint-placeholder-count="8">
<li style="border-bottom: 1px solid #F2F4F7; background: {{ r.bg }}">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<button type="button" aria-label="{{ r.pickLabel }}" aria-pressed="{{ r.pressedStr }}" onClick="{{ r.toggle }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer">
<sc-if value="{{ r.picked }}" hint-placeholder-val="{{ false }}">
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="stroke-width: 2.6"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</sc-if>
<sc-if value="{{ r.unpicked }}" hint-placeholder-val="{{ true }}">
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">{{ r.initial }}</span>
</sc-if>
</button>
<a href="App1Reader.dc.html" onContextMenu="{{ r.longPress }}" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
<span style="display: flex; align-items: baseline; gap: 8px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: {{ r.fw }}; color: #171C26">{{ r.who }}</span>
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums">{{ r.time }}</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" 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></sc-if>
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><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></sc-if>
</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
</a>
</div>
</li>
</sc-for>
</ul>
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
<a href="#" aria-current="page" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: #E3F2F3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></a>
<a href="App1Shell.dc.html" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></a>
</nav>
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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 aria-hidden="true" style="position: absolute; inset: 0; background: rgba(11, 54, 64, 0.32)"></div>
<nav aria-label="메일함" style="position: absolute; top: 0; bottom: 0; left: 0; width: 304px; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 0 16px 16px 0; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.2); overflow: hidden">
<h2 style="flex: 0 0 auto; margin: 0; padding: 24px 28px 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">메일함</h2>
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 4px 12px 12px">
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px">
<li><a href="#" aria-current="page" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; background: #E3F2F3; color: #0A5F67; font-weight: 600; font-size: 15px; text-decoration: none"><svg width="20" height="20" 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"><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">받은편지함</span><span style="flex: 0 0 auto; font-size: 13.5px; font-variant-numeric: tabular-nums; color: #0A5F67">3</span></a></li>
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" 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"><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">보낸편지함</span></a></li>
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" 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="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">임시보관함</span></a></li>
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" 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"><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">스팸메일함</span><span style="flex: 0 0 auto; font-size: 13.5px; font-variant-numeric: tabular-nums; color: #667085">2</span></a></li>
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" 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"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg><span style="flex: 1 1 auto; min-width: 0">휴지통</span></a></li>
</ul>
<div aria-hidden="true" style="height: 1px; margin: 8px 4px; background: #EEF0F3"></div>
<h2 style="margin: 4px 16px 2px; font-size: 12.5px; font-weight: 600; color: #667085">내 메일함</h2>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px">
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" 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="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">거래처</span><span style="flex: 0 0 auto; font-size: 13.5px; font-variant-numeric: tabular-nums; color: #667085">1</span></a></li>
<li><a href="#" style="display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 24px; color: #344054; font-weight: 500; font-size: 15px; text-decoration: none"><svg width="20" height="20" 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="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">프로젝트</span></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">길게 눌러 고르기 (탭 막대 숨김)</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<div role="toolbar" aria-label="고른 메일" style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #E3EEEF; background: #F3F8F8">
<button type="button" aria-label="선택 해제" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
<span style="flex: 1 1 auto; min-width: 0; padding-left: 4px; font-size: 17px; font-weight: 700; color: #0A5F67">2통 선택됨</span>
<button type="button" aria-label="읽음 표시" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"></path><path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"></path></svg></button>
<button type="button" aria-label="중요 표시" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
<button type="button" aria-label="이동" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><line x1="8" y1="13.5" x2="15" y2="13.5"></line><polyline points="12.5 11 15 13.5 12.5 16"></polyline></svg></button>
<button type="button" aria-label="삭제" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer; color: #0A5F67"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></button>
</div>
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 96px">
<sc-for list="{{ rowsPicked }}" as="r" hint-placeholder-count="8">
<li style="border-bottom: 1px solid #F2F4F7; background: {{ r.bg }}">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<button type="button" aria-label="{{ r.pickLabel }}" aria-pressed="{{ r.pressedStr }}" onClick="{{ r.toggle }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer">
<sc-if value="{{ r.picked }}" hint-placeholder-val="{{ false }}">
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="stroke-width: 2.6"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</sc-if>
<sc-if value="{{ r.unpicked }}" hint-placeholder-val="{{ true }}">
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">{{ r.initial }}</span>
</sc-if>
</button>
<a href="App1Reader.dc.html" onContextMenu="{{ r.longPress }}" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
<span style="display: flex; align-items: baseline; gap: 8px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: {{ r.fw }}; color: #171C26">{{ r.who }}</span>
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums">{{ r.time }}</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" 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></sc-if>
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><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></sc-if>
</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
</a>
</div>
</li>
</sc-for>
</ul>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">당겨서 새로고침</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
<span style="font-size: 12.5px; color: #667085">안 읽은 메일 3통</span>
</div>
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
</header>
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 96px">
<sc-for list="{{ rowsStatic }}" as="r" hint-placeholder-count="8">
<li style="border-bottom: 1px solid #F2F4F7; background: {{ r.bg }}">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<button type="button" aria-label="{{ r.pickLabel }}" aria-pressed="{{ r.pressedStr }}" onClick="{{ r.toggle }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer">
<sc-if value="{{ r.picked }}" hint-placeholder-val="{{ false }}">
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="stroke-width: 2.6"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
</sc-if>
<sc-if value="{{ r.unpicked }}" hint-placeholder-val="{{ true }}">
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">{{ r.initial }}</span>
</sc-if>
</button>
<a href="App1Reader.dc.html" onContextMenu="{{ r.longPress }}" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
<span style="display: flex; align-items: baseline; gap: 8px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: {{ r.fw }}; color: #171C26">{{ r.who }}</span>
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums">{{ r.time }}</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" 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></sc-if>
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><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></sc-if>
</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
</a>
</div>
</li>
</sc-for>
</ul>
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
<a href="#" aria-current="page" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: #E3F2F3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></a>
<a href="App1Shell.dc.html" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></a>
</nav>
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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 aria-hidden="true" style="position: absolute; top: 84px; left: 175px; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 8px rgba(16, 24, 28, 0.2); display: flex; align-items: center; justify-content: center">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0E7C86" stroke-width="2.6" stroke-linecap="round"><path d="M12 4a8 8 0 1 1-7.6 5.5"></path></svg>
</div>
<span role="status" style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap">새 메일을 확인하는 중</span>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">빈 메일함 (휴지통)</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">휴지통</h1>
</div>
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
</header>
<div style="flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 40px 120px; text-align: center">
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #F2F4F7; color: #667085"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></span>
<h2 style="margin: 4px 0 0; font-size: 17px; font-weight: 650">휴지통이 비어 있습니다</h2>
<p style="margin: 0; font-size: 14px; line-height: 1.6; color: #667085; word-break: keep-all">삭제한 메일이 여기에 표시됩니다. 들어간 지 30일이 지난 메일은 자동으로 지워집니다.</p>
</div>
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
<a href="#" aria-current="page" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: #E3F2F3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></a>
<a href="App1Shell.dc.html" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></a>
</nav>
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":2222,"height":956}}'>
class Component extends DCLogic {
state = { picked: {}, read: {}, flagged: {}, removed: {}, toastIds: null };
mails() {
return [
{ id: 'm1', who: '이도윤', initial: '이', time: '오전 10:42', subject: 'Re: 유지보수 계약 갱신 건', preview: '말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다. 기간은 1년이고, 단가는 작년과 같습니다.', unread: true, att: true },
{ id: 'm2', who: '인사팀', initial: '인', time: '오전 9:05', subject: '[공지] 계약직 채용 일정 안내', preview: '11월 채용 일정을 알려 드립니다. 서류 접수는 11월 14일(금)까지입니다.', unread: true },
{ id: 'm3', who: '박준호', initial: '박', time: '오전 8:31', subject: '11월 인프라 점검 일정 조율', preview: '점검 시간은 토요일 오전 2시부터 4시까지로 잡으려고 합니다. 괜찮은지 확인 부탁드립니다.', unread: true, flag: true },
{ id: 'm4', who: '한빛파트너스 고객지원', initial: '한', time: '어제', subject: '11월 정기 점검 일정 안내', preview: '안녕하세요, 한빛파트너스 고객지원팀입니다. 11월 정기 점검 일정을 안내해 드립니다.', att: true },
{ id: 'm5', who: '최서연', initial: '최', time: '11월 3일', subject: '11월 비용 정산 안내', preview: '10월 사용분 영수증을 11월 10일까지 올려 주세요.', att: true },
{ id: 'm6', who: '정하늘', initial: '정', time: '11월 2일', subject: '신규 입사자 교육 회의록', preview: '지난 회의에서 정한 교육 일정과 담당자를 정리했습니다.' },
{ id: 'm7', who: '김민수', initial: '김', time: '10월 30일', subject: '회의실 예약 변경', preview: '목요일 회의를 3층 큰 회의실로 옮겼습니다.' },
{ id: 'm8', who: '이도윤', initial: '이', time: '10월 29일', subject: '회신: 유지보수 계약 갱신 건', preview: '네, 확인했습니다. 단가와 기간을 정리해서 다음 주 초에 보내 드리겠습니다.' },
];
}
row(m, picked, unread, flagged, toggle, longPress) {
return {
who: m.who,
initial: m.initial,
time: m.time,
subject: m.subject,
preview: m.preview,
att: !!m.att,
flag: !!flagged,
picked: !!picked,
unpicked: !picked,
pressedStr: picked ? 'true' : 'false',
pickLabel: '고르기: ' + m.subject,
bg: picked ? '#E8F4F5' : '#FFFFFF',
fw: unread ? '650' : '450',
subFw: unread ? '600' : '400',
subColor: unread ? '#171C26' : '#344054',
timeFw: unread ? '600' : '400',
timeColor: unread ? '#171C26' : '#667085',
toggle: toggle,
longPress: longPress,
};
}
renderVals() {
const st = this.state;
const all = this.mails();
const pickedIds = Object.keys(st.picked).filter((id) => st.picked[id]);
const without = (obj, ids, value) => {
const next = { ...obj };
ids.forEach((id) => { next[id] = value; });
return next;
};
const toggleOf = (id) => () => this.setState({ picked: { ...st.picked, [id]: !st.picked[id] } });
const live = all.filter((m) => !st.removed[m.id]);
const rowsLive = live.map((m) => {
const toggle = toggleOf(m.id);
const longPress = (e) => {
if (e && e.preventDefault) e.preventDefault();
toggle();
};
return this.row(m, st.picked[m.id], m.unread && !st.read[m.id], m.flag || st.flagged[m.id], toggle, longPress);
});
const unread = live.filter((m) => m.unread && !st.read[m.id]).length;
const rowsStatic = all.map((m) => this.row(m, false, m.unread, m.flag));
const rowsPicked = all.map((m) => this.row(m, m.id === 'm1' || m.id === 'm3', m.unread, m.flag));
const selecting = pickedIds.length > 0;
return {
rowsLive: rowsLive,
rowsStatic: rowsStatic,
rowsPicked: rowsPicked,
selecting: selecting,
notSelecting: !selecting,
pickedText: pickedIds.length + '통 선택됨',
unreadText: unread > 0 ? '안 읽은 메일 ' + unread + '통' : '안 읽은 메일이 없습니다',
hasToast: !!st.toastIds,
toastText: st.toastIds ? '메일 ' + st.toastIds.length + '통을 휴지통으로 옮겼습니다.' : '',
fabBottom: st.toastIds ? '148px' : '88px',
clear: () => this.setState({ picked: {} }),
markRead: () => this.setState({ read: without(st.read, pickedIds, true), picked: {} }),
flagPicked: () => this.setState({ flagged: without(st.flagged, pickedIds, true), picked: {} }),
noop: () => {},
removePicked: () => this.setState({ removed: without(st.removed, pickedIds, true), picked: {}, toastIds: pickedIds }),
undo: () => this.setState({ removed: without(st.removed, st.toastIds || [], false), toastIds: null }),
};
}
}
</script>
</body>
</html>
+216
View File
@@ -0,0 +1,216 @@
<!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}
input::placeholder,textarea::placeholder{color:#8A94A3}
</style>
</helmet>
<div style="width: 1346px; height: 956px; box-sizing: border-box; padding: 40px; display: flex; gap: 48px; align-items: flex-start; background: #EEF1F4; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 15px; line-height: 1.5">
<sc-for list="{{ phones }}" as="p" hint-placeholder-count="2">
<div style="flex: 0 0 390px; order: {{ p.order }}; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ p.label }}</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; background: #FFFFFF">
<a href="App1MailList.dc.html" aria-label="목록으로" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>
<span style="flex: 1 1 auto"></span>
<button type="button" aria-label="삭제" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></button>
<button type="button" aria-label="더 보기" aria-haspopup="menu" aria-expanded="{{ p.menuStr }}" onClick="{{ p.toggleMenu }}" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="5" r="1.3" fill="currentColor"></circle><circle cx="12" cy="12" r="1.3" fill="currentColor"></circle><circle cx="12" cy="19" r="1.3" fill="currentColor"></circle></svg></button>
</header>
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto">
<article aria-labelledby="{{ p.id }}-subject">
<h1 id="{{ p.id }}-subject" style="margin: 0; padding: 6px 20px 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">11월 정기 점검 일정 안내</h1>
<div style="display: flex; gap: 12px; padding: 14px 20px 0">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">한</span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
<div style="display: flex; align-items: baseline; gap: 8px; padding-top: 1px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600">한빛파트너스 고객지원</span>
<span style="flex: 0 0 auto; font-size: 12.5px; color: #667085; font-variant-numeric: tabular-nums">어제 오후 4:20</span>
</div>
<button type="button" aria-expanded="{{ p.detailsStr }}" onClick="{{ p.toggleDetails }}" style="align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin: -10px 0 -6px -8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #4A5363; font: inherit; font-size: 13.5px; cursor: pointer">
<span>받는 사람 나</span>
<sc-if value="{{ p.details }}" hint-placeholder-val="{{ false }}"><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"><polyline points="18 15 12 9 6 15"></polyline></svg></sc-if>
<sc-if value="{{ p.noDetails }}" hint-placeholder-val="{{ true }}"><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"><polyline points="6 9 12 15 18 9"></polyline></svg></sc-if>
</button>
</div>
</div>
<sc-if value="{{ p.details }}" hint-placeholder-val="{{ false }}">
<dl style="margin: 10px 16px 4px; padding: 12px 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; border-radius: 10px; background: #F8F9FB; font-size: 13.5px; line-height: 1.45">
<dt style="color: #667085">보낸 사람</dt>
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">한빛파트너스 고객지원</span><span style="font-size: 13px; color: #667085; overflow-wrap: anywhere">support@hanbit-partners.co.kr</span></dd>
<dt style="color: #667085">받는 사람</dt>
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">김아라</span><span style="font-size: 13px; color: #667085; overflow-wrap: anywhere">ara.kim@arasystem.it.kr</span></dd>
<dt style="color: #667085">날짜</dt>
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">2026년 11월 4일 (수) 오후 4:20</span></dd>
</dl>
</sc-if>
<sc-if value="{{ p.notice }}" hint-placeholder-val="{{ true }}">
<div style="margin: 12px 16px 0; display: flex; flex-direction: column; padding: 12px 6px 2px 14px; border: 1px solid #F0D9A8; border-radius: 10px; background: #FFF7E6; color: #7A5200">
<div style="display: flex; align-items: flex-start; gap: 10px">
<svg width="18" height="18" 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"><line x1="2" y1="2" x2="22" y2="22"></line><path d="M10.41 10.41a2 2 0 1 1-2.83-2.82"></path><line x1="13.5" y1="13.5" x2="6" y2="21"></line><line x1="18" y1="12" x2="21" y2="15"></line><path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"></path><path d="M21 15V5a2 2 0 0 0-2-2H9"></path></svg>
<p style="margin: 0; font-size: 13.5px; line-height: 1.55; word-break: keep-all">외부 이미지를 차단했습니다. 개인정보 보호를 위해 보낸 사람 서버의 이미지는 불러오지 않습니다.</p>
</div>
<button type="button" onClick="{{ p.showImages }}" style="align-self: flex-end; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #7A5200; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer">이미지 보기</button>
</div>
</sc-if>
<div style="padding: 16px 20px 20px; font-size: 15px; line-height: 1.75; color: #1F2733; white-space: pre-line">안녕하세요, 한빛파트너스 고객지원팀입니다.
11월 정기 점검 일정을 안내해 드립니다.
점검하는 동안에는 고객 포털 접속이 잠시 끊깁니다.
일시: 11월 15일 (토) 오전 2:00부터 오전 5:00까지
대상: 고객 포털, 원격 지원 서비스
자세한 내용은 첨부한 안내문을 확인해 주세요.
감사합니다.</div>
<section aria-labelledby="{{ p.id }}-att" style="margin: 0 16px 24px; padding-top: 16px; border-top: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 8px">
<h2 id="{{ p.id }}-att" style="margin: 0 4px; font-size: 13px; font-weight: 600; color: #4A5363">첨부 파일 1개</h2>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
<li style="display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 8px 4px 8px 12px; border: 1px solid #E6E8EC; border-radius: 12px">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500">11월_정기점검_안내.pdf</span>
<span style="font-size: 12.5px; color: #667085">248 KB</span>
</div>
<button type="button" aria-label="11월_정기점검_안내.pdf 받기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg></button>
</li>
</ul>
</section>
</article>
</div>
<div role="toolbar" aria-label="답장과 전달" style="flex: 0 0 auto; display: flex; height: 64px; border-top: 1px solid #E6E8EC; background: #FFFFFF">
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg><span>답장</span></a>
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 17 2 12 7 7"></polyline><polyline points="12 17 7 12 12 7"></polyline><path d="M22 18v-2a4 4 0 0 0-4-4H7"></path></svg><span>전체 답장</span></a>
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg><span>전달</span></a>
</div>
<sc-if value="{{ p.menuOpen }}" hint-placeholder-val="{{ false }}">
<div role="menu" aria-label="더 보기" style="position: absolute; top: 52px; right: 8px; width: 224px; box-sizing: border-box; padding: 8px 0; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.16)">
<button type="button" role="menuitem" onClick="{{ p.closeMenu }}" style="width: 100%; display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #171C26; text-align: left; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>안 읽음 표시</span></button>
<button type="button" role="menuitem" onClick="{{ p.closeMenu }}" style="width: 100%; display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #171C26; text-align: left; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
<button type="button" role="menuitem" onClick="{{ p.closeMenu }}" style="width: 100%; display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #171C26; text-align: left; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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><line x1="8" y1="13.5" x2="15" y2="13.5"></line><polyline points="12.5 11 15 13.5 12.5 16"></polyline></svg></span><span>이동</span></button>
<button type="button" role="menuitem" onClick="{{ p.closeMenu }}" style="width: 100%; display: flex; align-items: center; gap: 14px; min-height: 48px; box-sizing: border-box; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #171C26; text-align: left; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>스팸 신고</span></button>
</div>
</sc-if>
</div>
</div>
</sc-for>
<div style="flex: 0 0 390px; order: 2; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">머리 펼침 · 첨부 받는 중</h2>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; background: #FFFFFF">
<a href="App1MailList.dc.html" aria-label="목록으로" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>
<span style="flex: 1 1 auto"></span>
<button type="button" aria-label="삭제" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg></button>
<button type="button" aria-label="더 보기" aria-haspopup="menu" aria-expanded="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="5" r="1.3" fill="currentColor"></circle><circle cx="12" cy="12" r="1.3" fill="currentColor"></circle><circle cx="12" cy="19" r="1.3" fill="currentColor"></circle></svg></button>
</header>
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto">
<article aria-labelledby="rb-subject">
<h1 id="rb-subject" style="margin: 0; padding: 6px 20px 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">Re: 유지보수 계약 갱신 건</h1>
<div style="display: flex; gap: 12px; padding: 14px 20px 0">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">이</span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
<div style="display: flex; align-items: baseline; gap: 8px; padding-top: 1px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600">이도윤</span>
<span style="flex: 0 0 auto; font-size: 12.5px; color: #667085; font-variant-numeric: tabular-nums">오전 10:42</span>
</div>
<button type="button" aria-expanded="true" style="align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin: -10px 0 -6px -8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #4A5363; font: inherit; font-size: 13.5px; cursor: pointer">
<span>받는 사람 나 외 1명</span>
<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"><polyline points="18 15 12 9 6 15"></polyline></svg>
</button>
</div>
</div>
<dl style="margin: 10px 16px 4px; padding: 12px 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; border-radius: 10px; background: #F8F9FB; font-size: 13.5px; line-height: 1.45">
<dt style="color: #667085">보낸 사람</dt>
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">이도윤</span><span style="font-size: 13px; color: #667085; overflow-wrap: anywhere">doyun.lee@arasystem.it.kr</span></dd>
<dt style="color: #667085">받는 사람</dt>
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">김아라</span><span style="font-size: 13px; color: #667085; overflow-wrap: anywhere">ara.kim@arasystem.it.kr</span></dd>
<dt style="color: #667085">참조</dt>
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">박준호</span><span style="font-size: 13px; color: #667085; overflow-wrap: anywhere">junho.park@arasystem.it.kr</span></dd>
<dt style="color: #667085">날짜</dt>
<dd style="margin: 0; min-width: 0; display: flex; flex-direction: column"><span style="color: #171C26">2026년 11월 5일 (목) 오전 10:42</span></dd>
</dl>
<div style="padding: 16px 20px 20px; font-size: 15px; line-height: 1.75; color: #1F2733; white-space: pre-line">김아라님, 안녕하세요.
말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다.
기간은 1년이고, 단가는 작년과 같습니다.
이번 주 안에 회신 주시면 다음 주 월요일에 서명하겠습니다.
이도윤 드림</div>
<section aria-labelledby="rb-att" style="margin: 0 16px 24px; padding-top: 16px; border-top: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 8px">
<h2 id="rb-att" style="margin: 0 4px; font-size: 13px; font-weight: 600; color: #4A5363">첨부 파일 2개</h2>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
<li style="display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 8px 4px 8px 12px; border: 1px solid #E6E8EC; border-radius: 12px">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; line-height: 1.35">
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500">유지보수_계약서_수정본.docx</span>
<span style="display: flex; align-items: center; gap: 8px">
<span role="progressbar" aria-label="유지보수_계약서_수정본.docx 받는 중" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="flex: 1 1 auto; display: block; height: 4px; border-radius: 2px; background: #E4E7EC; overflow: hidden"><span style="display: block; width: 64%; height: 100%; border-radius: 2px; background: #0E7C86"></span></span>
<span style="flex: 0 0 auto; font-size: 12.5px; color: #0A5F67; font-variant-numeric: tabular-nums">받는 중 64%</span>
</span>
</div>
<button type="button" aria-label="유지보수_계약서_수정본.docx 받기 취소" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
</li>
<li style="display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 8px 4px 8px 12px; border: 1px solid #E6E8EC; border-radius: 12px">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #F2F4F7; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500">견적서_2026.pdf</span>
<span style="font-size: 12.5px; color: #667085">1.2 MB</span>
</div>
<button type="button" aria-label="견적서_2026.pdf 받기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg></button>
</li>
</ul>
</section>
</article>
</div>
<div role="toolbar" aria-label="답장과 전달" style="flex: 0 0 auto; display: flex; height: 64px; border-top: 1px solid #E6E8EC; background: #FFFFFF">
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg><span>답장</span></a>
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 17 2 12 7 7"></polyline><polyline points="12 17 7 12 12 7"></polyline><path d="M22 18v-2a4 4 0 0 0-4-4H7"></path></svg><span>전체 답장</span></a>
<a href="App1Compose.dc.html" style="flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #344054; font-size: 12.5px; font-weight: 600; text-decoration: none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg><span>전달</span></a>
</div>
</div>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1346,"height":956}}'>
class Component extends DCLogic {
state = { menu: false, details: false, images: false };
renderVals() {
const st = this.state;
const noop = () => {};
const make = (live) => {
const menuOpen = live ? st.menu : true;
const details = live ? st.details : false;
return {
id: live ? 'ra' : 'rc',
order: live ? '1' : '3',
label: live ? '기본 (외부 이미지 차단)' : '더 보기 메뉴',
menuOpen: menuOpen,
menuStr: menuOpen ? 'true' : 'false',
details: details,
noDetails: !details,
detailsStr: details ? 'true' : 'false',
notice: live ? !st.images : true,
toggleMenu: live ? () => this.setState({ menu: !st.menu }) : noop,
closeMenu: live ? () => this.setState({ menu: false }) : noop,
toggleDetails: live ? () => this.setState({ details: !st.details }) : noop,
showImages: live ? () => this.setState({ images: true }) : noop,
};
};
return { phones: [make(true), make(false)] };
}
}
</script>
</body>
</html>
+303
View File
@@ -0,0 +1,303 @@
<!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}
input::placeholder,textarea::placeholder{color:#8A94A3}
</style>
</helmet>
<div style="width: 2352px; height: 976px; box-sizing: border-box; padding: 40px; display: flex; gap: 48px; align-items: flex-start; background: #EEF1F4; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 15px; line-height: 1.5">
<sc-for list="{{ phones }}" as="p" hint-placeholder-count="4">
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 40px; display: flex; flex-direction: column">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ p.label }}</h2>
<p style="margin: 0; height: 20px; font-size: 12.5px; line-height: 20px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ p.note }}</p>
</div>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<sc-if value="{{ p.showMail }}" hint-placeholder-val="{{ true }}">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
<span style="font-size: 12.5px; color: #667085">안 읽은 메일 3통</span>
</div>
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
</header>
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 96px">
<li style="border-bottom: 1px solid #F2F4F7">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<button type="button" aria-label="고르기: Re: 유지보수 계약 갱신 건" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">이</span></button>
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
<span style="display: flex; align-items: baseline; gap: 8px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; color: #171C26">이도윤</span>
<span style="flex: 0 0 auto; font-size: 12.5px; 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="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: #171C26">Re: 유지보수 계약 갱신 건</span><svg role="img" aria-label="첨부 있음" width="15" height="15" 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="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다. 기간은 1년이고, 단가는 작년과 같습니다.</span>
</a>
</div>
</li>
<li style="border-bottom: 1px solid #F2F4F7">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<button type="button" aria-label="고르기: [공지] 계약직 채용 일정 안내" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">인</span></button>
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
<span style="display: flex; align-items: baseline; gap: 8px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; color: #171C26">인사팀</span>
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오전 9:05</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: #171C26">[공지] 계약직 채용 일정 안내</span>
</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">11월 채용 일정을 알려 드립니다. 서류 접수는 11월 14일(금)까지입니다.</span>
</a>
</div>
</li>
<li style="border-bottom: 1px solid #F2F4F7">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<button type="button" aria-label="고르기: 11월 인프라 점검 일정 조율" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">박</span></button>
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
<span style="display: flex; align-items: baseline; gap: 8px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; color: #171C26">박준호</span>
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: #171C26; font-variant-numeric: tabular-nums">오전 8:31</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: #171C26">11월 인프라 점검 일정 조율</span>
</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">점검 시간은 토요일 오전 2시부터 4시까지로 잡으려고 합니다. 괜찮은지 확인 부탁드립니다.</span>
</a>
</div>
</li>
<li style="border-bottom: 1px solid #F2F4F7">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<button type="button" aria-label="고르기: 11월 정기 점검 일정 안내" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">한</span></button>
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
<span style="display: flex; align-items: baseline; gap: 8px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 450; color: #171C26">한빛파트너스 고객지원</span>
<span style="flex: 0 0 auto; font-size: 12.5px; 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="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 400; color: #344054">11월 정기 점검 일정 안내</span><svg role="img" aria-label="첨부 있음" width="15" height="15" 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="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">안녕하세요, 한빛파트너스 고객지원팀입니다. 11월 정기 점검 일정을 안내해 드립니다.</span>
</a>
</div>
</li>
<li style="border-bottom: 1px solid #F2F4F7">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<button type="button" aria-label="고르기: 11월 비용 정산 안내" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">최</span></button>
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
<span style="display: flex; align-items: baseline; gap: 8px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 450; color: #171C26">최서연</span>
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">11월 3일</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 400; color: #344054">11월 비용 정산 안내</span><svg role="img" aria-label="첨부 있음" width="15" height="15" 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="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">10월 사용분 영수증을 11월 10일까지 올려 주세요.</span>
</a>
</div>
</li>
<li style="border-bottom: 1px solid #F2F4F7">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<button type="button" aria-label="고르기: 신규 입사자 교육 회의록" aria-pressed="false" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 16px; font-weight: 600">정</span></button>
<a href="App1Reader.dc.html" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; color: inherit; text-decoration: none">
<span style="display: flex; align-items: baseline; gap: 8px">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 450; color: #171C26">정하늘</span>
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: 400; color: #667085; font-variant-numeric: tabular-nums">11월 2일</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 400; color: #344054">신규 입사자 교육 회의록</span>
</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">지난 회의에서 정한 교육 일정과 담당자를 정리했습니다.</span>
</a>
</div>
</li>
</ul>
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>
</sc-if>
<sc-if value="{{ p.showSettings }}" hint-placeholder-val="{{ false }}">
<header style="flex: 0 0 auto; display: flex; align-items: center; height: 64px; box-sizing: border-box; padding: 0 20px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">설정</h1>
</header>
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 24px">
<section aria-labelledby="{{ p.id }}-me">
<h2 id="{{ p.id }}-me" style="margin: 0; padding: 18px 20px 6px; font-size: 13px; font-weight: 600; color: #667085">내 정보</h2>
<div style="display: flex; align-items: center; gap: 14px; min-height: 68px; box-sizing: border-box; padding: 6px 20px">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 18px; font-weight: 600">김</span>
<div style="min-width: 0; display: flex; flex-direction: column; line-height: 1.4">
<span style="font-size: 16px; font-weight: 600">김아라</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #667085">ara.kim@arasystem.it.kr</span>
</div>
</div>
</section>
<div aria-hidden="true" style="height: 1px; margin: 8px 0 0; background: #EEF0F3"></div>
<section aria-labelledby="{{ p.id }}-notify-h">
<h2 id="{{ p.id }}-notify-h" style="margin: 0; padding: 18px 20px 6px; font-size: 13px; font-weight: 600; color: #667085">알림</h2>
<div style="display: flex; align-items: center; gap: 12px; min-height: 68px; box-sizing: border-box; padding: 6px 12px 6px 20px">
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px">
<span id="{{ p.id }}-notify-label" style="font-size: 15.5px; font-weight: 500">새 메일 알림</span>
<span id="{{ p.id }}-notify-desc" style="font-size: 13px; line-height: 1.5; color: #667085">새 메일이 오면 휴대폰 알림으로 알려 드립니다.</span>
</div>
<button type="button" role="switch" aria-checked="{{ p.notifyStr }}" aria-labelledby="{{ p.id }}-notify-label" aria-describedby="{{ p.id }}-notify-desc" onClick="{{ p.toggleNotify }}" style="flex: 0 0 auto; width: 64px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 24px; background: transparent; cursor: pointer">
<span aria-hidden="true" style="display: flex; align-items: center; justify-content: {{ p.thumbJustify }}; width: 52px; height: 32px; box-sizing: border-box; padding: 0 2px; border: 2px solid {{ p.trackBorder }}; border-radius: 16px; background: {{ p.trackBg }}">
<span style="display: block; width: {{ p.thumbSize }}; height: {{ p.thumbSize }}; margin: 0 {{ p.thumbGap }}; border-radius: 50%; background: {{ p.thumbBg }}"></span>
</span>
</button>
</div>
</section>
<div aria-hidden="true" style="height: 1px; margin: 8px 0 0; background: #EEF0F3"></div>
<section aria-labelledby="{{ p.id }}-about">
<h2 id="{{ p.id }}-about" style="margin: 0; padding: 18px 20px 6px; font-size: 13px; font-weight: 600; color: #667085">앱 정보</h2>
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 0 20px">
<span style="font-size: 15.5px">앱 버전</span>
<span style="font-size: 14px; color: #667085; font-variant-numeric: tabular-nums">1.0.0</span>
</div>
<button type="button" style="width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 0 12px 0 20px; border: 0; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; text-align: left; cursor: pointer"><span>오픈소스 라이선스</span><span aria-hidden="true" style="display: inline-flex; color: #667085"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"></polyline></svg></span></button>
</section>
<div aria-hidden="true" style="height: 1px; margin: 8px 0 0; background: #EEF0F3"></div>
<section aria-labelledby="{{ p.id }}-help">
<h2 id="{{ p.id }}-help" style="margin: 0; padding: 18px 20px 6px; font-size: 13px; font-weight: 600; color: #667085">문의</h2>
<p style="margin: 0; padding: 2px 20px 8px; font-size: 14px; line-height: 1.6; color: #667085; word-break: keep-all">앱이나 계정 문제로 도움이 필요하면 연락해 주세요.<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
</section>
<div style="padding: 20px 20px 0">
<button type="button" onClick="{{ p.openDialog }}" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 10px; background: #FFFFFF; color: #344054; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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></button>
</div>
</div>
</sc-if>
<sc-if value="{{ p.twoTabs }}" hint-placeholder-val="{{ true }}">
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
<button type="button" aria-current="{{ p.mailCurrent }}" onClick="{{ p.pickMail }}" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: {{ p.mailFg }}; font: inherit; font-size: 12.5px; font-weight: {{ p.mailWeight }}; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: {{ p.mailPill }}"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></button>
<button type="button" aria-current="{{ p.setCurrent }}" onClick="{{ p.pickSettings }}" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: {{ p.setFg }}; font: inherit; font-size: 12.5px; font-weight: {{ p.setWeight }}; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: {{ p.setPill }}"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></button>
</nav>
</sc-if>
<sc-if value="{{ p.fiveTabs }}" hint-placeholder-val="{{ false }}">
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
<button type="button" aria-current="page" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: #E3F2F3"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg></span><span>메일</span></button>
<button type="button" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" 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="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>캘린더</span></button>
<button type="button" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>파일</span></button>
<button type="button" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>주소록</span></button>
<button type="button" style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; background: transparent"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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>설정</span></button>
</nav>
</sc-if>
<sc-if value="{{ p.dialogOpen }}" hint-placeholder-val="{{ false }}">
<div aria-hidden="true" style="position: absolute; inset: 0; background: rgba(11, 54, 64, 0.32)"></div>
<div role="alertdialog" aria-modal="true" aria-labelledby="{{ p.id }}-logout-title" aria-describedby="{{ p.id }}-logout-desc" style="position: absolute; left: 24px; right: 24px; top: 300px; box-sizing: border-box; padding: 24px 16px 12px 24px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.2); display: flex; flex-direction: column; gap: 12px">
<h2 id="{{ p.id }}-logout-title" style="margin: 0; padding-right: 8px; font-size: 19px; line-height: 1.4; font-weight: 700">로그아웃할까요?</h2>
<p id="{{ p.id }}-logout-desc" style="margin: 0; padding-right: 8px; font-size: 14.5px; line-height: 1.6; color: #4A5363; word-break: keep-all">로그아웃하면 이 휴대폰에서 새 메일 알림도 오지 않습니다. 다음에 쓸 때는 다시 로그인해 주세요.</p>
<div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px">
<button type="button" ref="{{ p.cancelRef }}" onClick="{{ p.closeDialog }}" style="min-height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: {{ p.cancelRing }}">취소</button>
<a href="App1Login.dc.html" style="display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none">로그아웃</a>
</div>
</div>
</sc-if>
</div>
</div>
</sc-for>
<div style="flex: 0 0 520px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 40px; display: flex; flex-direction: column">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">읽기 · 쓰기는 전체 화면</h2>
<p style="margin: 0; height: 20px; font-size: 12.5px; line-height: 20px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">탭 막대는 목록 화면에만 있고, 메일을 열거나 쓰면 화면 전체를 씁니다.</p>
</div>
<div style="display: flex; align-items: flex-start; justify-content: center; padding: 28px 20px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD">
<figure style="flex: 0 0 132px; margin: 0; display: flex; flex-direction: column; gap: 10px">
<span aria-hidden="true" style="position: relative; width: 132px; height: 286px; box-sizing: border-box; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD; display: flex; flex-direction: column">
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #98A2B3"></span><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #98A2B3"></span></span>
<span style="flex: 1 1 auto; display: flex; flex-direction: column"><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 70%; height: 4px; border-radius: 3px; background: #667085"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 70%; height: 4px; border-radius: 3px; background: #667085"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #C5CBD3"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #C5CBD3"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #C5CBD3"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span><span style="display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #F2F4F7"><span style="flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #E3F2F3"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px"><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #C5CBD3"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span></span></span>
<span style="position: absolute; right: 8px; bottom: 34px; width: 34px; height: 16px; border-radius: 6px; background: #0E7C86"></span>
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around; height: 26px; border-top: 1px solid #0E7C86; background: #E3F2F3"><span style="display: block; width: 20px; height: 8px; border-radius: 4px; background: #0E7C86"></span><span style="display: block; width: 20px; height: 8px; border-radius: 4px; background: #98A2B3"></span></span>
</span>
<figcaption style="font-size: 12.5px; line-height: 1.45; color: #344054; text-align: center">목록<br>탭 막대 있음</figcaption>
</figure>
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; width: 32px; justify-content: center; margin-top: 133px; color: #8A94A3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
<figure style="flex: 0 0 132px; margin: 0; display: flex; flex-direction: column; gap: 10px">
<span aria-hidden="true" style="position: relative; width: 132px; height: 286px; box-sizing: border-box; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD; display: flex; flex-direction: column">
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #4A5363"></span><span style="display: flex; gap: 6px"><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #98A2B3"></span><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #98A2B3"></span></span></span>
<span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px"><span style="display: block; width: 80%; height: 6px; border-radius: 3px; background: #4A5363"></span><span style="display: block; width: 50%; height: 4px; border-radius: 3px; background: #98A2B3"></span><span style="height: 4px"></span><span style="display: block; width: 95%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 92%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="height: 4px"></span><span style="display: block; width: 85%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 70%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span>
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around; height: 24px; border-top: 1px solid #E6E8EC"><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #4A5363"></span><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #4A5363"></span><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #4A5363"></span></span>
</span>
<figcaption style="font-size: 12.5px; line-height: 1.45; color: #344054; text-align: center">읽기<br>탭 막대 없음</figcaption>
</figure>
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; width: 32px; justify-content: center; margin-top: 133px; color: #8A94A3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
<figure style="flex: 0 0 132px; margin: 0; display: flex; flex-direction: column; gap: 10px">
<span aria-hidden="true" style="position: relative; width: 132px; height: 286px; box-sizing: border-box; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD; display: flex; flex-direction: column">
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #4A5363"></span><span style="display: block; width: 8px; height: 8px; border-radius: 2px; background: #0E7C86"></span></span>
<span style="display: flex; flex-direction: column"><span style="display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 24px; height: 4px; border-radius: 3px; background: #98A2B3"></span><span style="display: block; width: 55%; height: 4px; border-radius: 3px; background: #C5CBD3"></span></span><span style="display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 24px; height: 4px; border-radius: 3px; background: #98A2B3"></span><span style="display: block; width: 45%; height: 4px; border-radius: 3px; background: #C5CBD3"></span></span><span style="display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-bottom: 1px solid #EEF0F3"><span style="display: block; width: 24px; height: 4px; border-radius: 3px; background: #98A2B3"></span><span style="display: block; width: 70%; height: 4px; border-radius: 3px; background: #C5CBD3"></span></span></span>
<span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px"><span style="display: block; width: 90%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 80%; height: 4px; border-radius: 3px; background: #E4E7EC"></span><span style="display: block; width: 60%; height: 4px; border-radius: 3px; background: #E4E7EC"></span></span>
</span>
<figcaption style="font-size: 12.5px; line-height: 1.45; color: #344054; text-align: center">쓰기<br>탭 막대 없음</figcaption>
</figure>
</div>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":2352,"height":976}}'>
class Component extends DCLogic {
state = { tab: 'mail', notify: { s1: true, s3: true }, dialog: { s1: false, s3: false } };
renderVals() {
const st = this.state;
const noop = () => {};
const CONFIGS = [
{ id: 's1', label: '첫 판 탭 막대 [메일 · 설정]', note: '탭을 누르면 화면이 바뀝니다', live: true, interactive: true, tabs: 2 },
{ id: 's2', label: '나중 모습', note: '예시 — 모듈이 준비되면 하나씩 늘어납니다', tab: 'mail', tabs: 5 },
{ id: 's3', label: '설정 탭', note: '[로그아웃]을 누르면 확인 창이 열립니다', tab: 'settings', interactive: true, tabs: 2 },
{ id: 's4', label: '로그아웃 확인 창', note: '처음 초점은 [취소]에 둡니다', tab: 'settings', fixedDialog: true, tabs: 2 },
];
const phones = CONFIGS.map((c) => {
const tab = c.live ? st.tab : c.tab;
const onMail = tab === 'mail';
const notifyOn = c.interactive ? st.notify[c.id] !== false : true;
const dialogOpen = c.fixedDialog ? true : c.interactive ? !!st.dialog[c.id] : false;
const setDialog = (open) => () => this.setState({ dialog: { ...st.dialog, [c.id]: open } });
return {
id: c.id,
label: c.label,
note: c.note,
showMail: onMail,
showSettings: !onMail,
twoTabs: c.tabs === 2,
fiveTabs: c.tabs === 5,
mailCurrent: onMail ? 'page' : undefined,
setCurrent: onMail ? undefined : 'page',
mailFg: onMail ? '#0A5F67' : '#4A5363',
mailPill: onMail ? '#E3F2F3' : 'transparent',
mailWeight: onMail ? '700' : '500',
setFg: onMail ? '#4A5363' : '#0A5F67',
setPill: onMail ? 'transparent' : '#E3F2F3',
setWeight: onMail ? '500' : '700',
pickMail: c.live ? () => this.setState({ tab: 'mail' }) : noop,
pickSettings: c.live ? () => this.setState({ tab: 'settings' }) : noop,
notifyStr: notifyOn ? 'true' : 'false',
trackBg: notifyOn ? '#0E7C86' : '#FFFFFF',
trackBorder: notifyOn ? '#0E7C86' : '#8A94A3',
thumbBg: notifyOn ? '#FFFFFF' : '#8A94A3',
thumbSize: notifyOn ? '24px' : '16px',
thumbGap: notifyOn ? '0' : '4px',
thumbJustify: notifyOn ? 'flex-end' : 'flex-start',
toggleNotify: c.interactive ? () => this.setState({ notify: { ...st.notify, [c.id]: !notifyOn } }) : noop,
dialogOpen: dialogOpen,
openDialog: c.interactive ? setDialog(true) : noop,
closeDialog: c.interactive ? setDialog(false) : noop,
// 눌러서 연 창은 [취소]에 초점을 준다. 늘 열려 있는 그림은 초점을 뺏지 않고 고리만 그린다
cancelRef: c.interactive ? (el) => { if (el) el.focus(); } : undefined,
cancelRing: c.fixedDialog ? '0 0 0 2px #FFFFFF, 0 0 0 4px #0E7C86' : 'none',
};
});
return { phones: phones };
}
}
</script>
</body>
</html>
+9 -3
View File
@@ -49,9 +49,14 @@
"MailNoticesCutover.dc.html": { "x": 4560, "y": 25610, "w": 1440, "h": 3780, "title": "알림 · 안내 모음(13단계)" },
"Search14.dc.html": { "x": 0, "y": 30500, "w": 1440, "h": 900, "title": "메일 검색 · 조건 검색 · 강조", "expand": "fill", "is_interactive": true },
"Thread14.dc.html": { "x": 1520, "y": 30500, "w": 1440, "h": 900, "title": "읽기 화면 · 같은 대화", "expand": "fill", "is_interactive": true },
"ListThreads14.dc.html": { "x": 3040, "y": 30500, "w": 1440, "h": 900, "title": "목록 · 대화로 묶어 보기", "expand": "fill", "is_interactive": true }
"ListThreads14.dc.html": { "x": 3040, "y": 30500, "w": 1440, "h": 900, "title": "목록 · 대화로 묶어 보기", "expand": "fill", "is_interactive": true },
"App1Login.dc.html": { "x": 0, "y": 32000, "w": 908, "h": 1028, "title": "앱 · 로그인 (네 단계 전환)", "is_interactive": true },
"App1MailList.dc.html": { "x": 988, "y": 32000, "w": 2222, "h": 956, "title": "앱 · 메일 목록", "is_interactive": true },
"App1Reader.dc.html": { "x": 3290, "y": 32000, "w": 1346, "h": 956, "title": "앱 · 읽기", "is_interactive": true },
"App1Compose.dc.html": { "x": 4716, "y": 32000, "w": 1784, "h": 956, "title": "앱 · 쓰기", "is_interactive": true },
"App1Shell.dc.html": { "x": 6580, "y": 32000, "w": 2352, "h": 976, "title": "앱 · 틀 · 설정", "is_interactive": true }
},
"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", "Search14.dc.html", "Thread14.dc.html", "ListThreads14.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", "Search14.dc.html", "Thread14.dc.html", "ListThreads14.dc.html", "App1Login.dc.html", "App1MailList.dc.html", "App1Reader.dc.html", "App1Compose.dc.html", "App1Shell.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 },
@@ -65,7 +70,8 @@
"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 },
"phase13": { "x": 0, "y": 25310, "text": "13단계 화면 — 전환 준비(새 비밀번호 · 2단계 필수 · 메일 프로그램 연결 · 알림) — 2026-10-31 확정", "kind": "title1", "maxW": 6000 },
"phase14": { "x": 0, "y": 30200, "text": "14단계 화면 — 검색 · 조건 검색 · 강조 · 같은 대화 · 대화로 묶어 보기 — 2026-11-05 확정", "kind": "title1", "maxW": 4480 }
"phase14": { "x": 0, "y": 30200, "text": "14단계 화면 — 검색 · 조건 검색 · 강조 · 같은 대화 · 대화로 묶어 보기 — 2026-11-05 확정", "kind": "title1", "maxW": 4480 },
"app1": { "x": 0, "y": 31700, "text": "앱 1단계 화면 — 로그인 · 메일 목록 · 읽기 · 쓰기 · 앱 틀 — 2026-11-05 확정(안드로이드 먼저)", "kind": "title1", "maxW": 8932 }
},
"designSystems": []
}