generated from ttipo/project-base
feat(flutter): 앱 첫 판 화면 — 로그인 · 메일 목록 · 읽기 · 쓰기 · 검색 · 새 메일 알림 #21
@@ -0,0 +1,484 @@
|
||||
<!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}
|
||||
mark{background:#FCE7A4;color:inherit}
|
||||
.sfield:focus-within .fakecaret{display:none}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 3098px; 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 style="display: flex; justify-content: flex-end; height: 48px">
|
||||
<div role="group" aria-label="결과 없음 상태 고르기" style="flex: 0 0 390px; display: flex; gap: 8px">
|
||||
<sc-for list="{{ b7Modes }}" as="s" hint-placeholder-count="2">
|
||||
<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>
|
||||
<div style="display: flex; gap: 48px; align-items: flex-start">
|
||||
|
||||
<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">
|
||||
<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 class="sfield" style="position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center">
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<span class="fakecaret" aria-hidden="true" style="position: absolute; left: 4px; top: 14px; width: 2px; height: 20px; border-radius: 1px; background: #0E7C86"></span>
|
||||
</span>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s1-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s1-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="flex: 0 0 auto; margin: 0; padding: 16px 16px 0; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">보낸 사람, 받는 사람, 제목, 본문, 첨부 파일 이름에서 찾습니다. 여러 낱말을 넣으면 모두 들어간 메일을 찾습니다.</p>
|
||||
<div style="flex: 1 1 auto"></div>
|
||||
<div aria-hidden="true" style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: 6px 6px 28px; background: #E4E7EC">
|
||||
<div style="height: 40px"></div>
|
||||
<div style="display: flex; gap: 6px; height: 52px">
|
||||
<sc-for list="{{ kb10 }}" as="k" hint-placeholder-count="10"><span style="flex: 1 1 0; border-radius: 8px; background: #F8F9FB; box-shadow: 0 1px 0 #C5CAD2"></span></sc-for>
|
||||
</div>
|
||||
<div style="display: flex; gap: 6px; height: 52px; padding: 0 18px">
|
||||
<sc-for list="{{ kb9 }}" as="k" hint-placeholder-count="9"><span style="flex: 1 1 0; border-radius: 8px; background: #F8F9FB; box-shadow: 0 1px 0 #C5CAD2"></span></sc-for>
|
||||
</div>
|
||||
<div style="display: flex; gap: 6px; height: 52px">
|
||||
<span style="flex: 1.5 1 0; border-radius: 8px; background: #CDD2D9"></span>
|
||||
<sc-for list="{{ kb7 }}" as="k" hint-placeholder-count="7"><span style="flex: 1 1 0; border-radius: 8px; background: #F8F9FB; box-shadow: 0 1px 0 #C5CAD2"></span></sc-for>
|
||||
<span style="flex: 1.5 1 0; border-radius: 8px; background: #CDD2D9"></span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 6px; height: 52px">
|
||||
<span style="flex: 1.5 1 0; border-radius: 8px; background: #CDD2D9"></span>
|
||||
<span style="flex: 1 1 0; border-radius: 8px; background: #F8F9FB; box-shadow: 0 1px 0 #C5CAD2"></span>
|
||||
<span style="flex: 5 1 0; border-radius: 8px; background: #F8F9FB; box-shadow: 0 1px 0 #C5CAD2"></span>
|
||||
<span style="flex: 1 1 0; border-radius: 8px; background: #F8F9FB; box-shadow: 0 1px 0 #C5CAD2"></span>
|
||||
<span style="flex: 1.5 1 0; display: flex; align-items: center; justify-content: center; border-radius: 26px; background: #0E7C86; color: #FFFFFF"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><line x1="20" y1="20" x2="16.2" y2="16.2"></line></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" value="계약" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s2-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s2-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p role="status" style="flex: 0 0 auto; margin: 0; height: 36px; box-sizing: border-box; padding: 0 16px; font-size: 13px; line-height: 36px; color: #667085; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">‘계약’ · 찾는 중</p>
|
||||
<div style="position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden">
|
||||
<span style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap">찾는 중</span>
|
||||
<div aria-hidden="true">
|
||||
<sc-for list="{{ skel }}" as="k" hint-placeholder-count="8">
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 14px 12px">
|
||||
<span style="flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #E4E7EC"></span>
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px">
|
||||
<span style="display: block; width: 40%; height: 10px; border-radius: 4px; background: #E4E7EC"></span>
|
||||
<span style="display: block; width: 80%; height: 10px; border-radius: 4px; background: #E4E7EC"></span>
|
||||
<span style="display: block; width: 100%; height: 10px; border-radius: 4px; background: #E4E7EC"></span>
|
||||
</span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" value="계약" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s3-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s3-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p role="status" style="flex: 0 0 auto; margin: 0; height: 36px; box-sizing: border-box; padding: 0 16px; font-size: 13px; line-height: 36px; color: #667085; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">‘계약’ · 4통</p>
|
||||
<ul aria-label="검색 결과" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 24px">
|
||||
<sc-for list="{{ rows3 }}" as="r" hint-placeholder-count="4">
|
||||
<li style="border-bottom: 1px solid #F2F4F7; background: #FFFFFF">
|
||||
<a href="App1SearchStates.dc.html" aria-label="{{ r.label }}" style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px; color: inherit; text-decoration: none">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center"><span 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></span>
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px">
|
||||
<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; display: flex; align-items: baseline">
|
||||
<sc-if value="{{ r.hasBox }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 1 auto; min-width: 0; max-width: 124px; box-sizing: border-box; padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #667085">{{ r.boxLabel }}</span></sc-if>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums; white-space: nowrap">{{ r.time }}</span>
|
||||
</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 }}"><sc-for list="{{ r.subjectParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark>{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg aria-hidden="true" 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 aria-hidden="true" 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"><sc-for list="{{ r.previewParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark style="color: {{ p.fg }}">{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
</span>
|
||||
</a>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" value="계약" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s4-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s4-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: -4px 0 0; padding: 0 16px 12px; font-size: 13px; line-height: 1.5; color: #667085; word-break: keep-all">휴지통과 스팸메일함은 빼고 찾습니다</p>
|
||||
</div>
|
||||
<p role="status" style="flex: 0 0 auto; margin: 0; height: 36px; box-sizing: border-box; padding: 0 16px; font-size: 13px; line-height: 36px; color: #667085; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">‘계약’ · 6통</p>
|
||||
<ul aria-label="검색 결과" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 24px">
|
||||
<sc-for list="{{ rows4 }}" as="r" hint-placeholder-count="6">
|
||||
<li style="border-bottom: 1px solid #F2F4F7; background: #FFFFFF">
|
||||
<a href="App1SearchStates.dc.html" aria-label="{{ r.label }}" style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px; color: inherit; text-decoration: none">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center"><span 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></span>
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px">
|
||||
<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; display: flex; align-items: baseline">
|
||||
<sc-if value="{{ r.hasBox }}" hint-placeholder-val="{{ true }}"><span style="flex: 0 1 auto; min-width: 0; max-width: 124px; box-sizing: border-box; padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #667085">{{ r.boxLabel }}</span></sc-if>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums; white-space: nowrap">{{ r.time }}</span>
|
||||
</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 }}"><sc-for list="{{ r.subjectParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark>{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg aria-hidden="true" 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 aria-hidden="true" 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"><sc-for list="{{ r.previewParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark style="color: {{ p.fg }}">{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
</span>
|
||||
</a>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" value="계약" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s5-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s5-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p role="status" style="flex: 0 0 auto; margin: 0; height: 36px; box-sizing: border-box; padding: 0 16px; font-size: 13px; line-height: 36px; color: #667085; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">‘계약’ · 3통</p>
|
||||
<div role="status" style="flex: 0 0 auto; display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #E3EEEF; background: #F3F8F8; color: #344054">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0E7C86" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
||||
<p style="flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; line-height: 1.55; word-break: keep-all">지난 메일을 검색할 수 있게 밤사이에 준비하고 있습니다. 메일이 많으면 며칠 걸릴 수 있고, 그동안은 낱말이 통째로 같은 메일만 찾습니다.</p>
|
||||
</div>
|
||||
<ul aria-label="검색 결과" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 24px">
|
||||
<sc-for list="{{ rows5 }}" as="r" hint-placeholder-count="3">
|
||||
<li style="border-bottom: 1px solid #F2F4F7; background: #FFFFFF">
|
||||
<a href="App1SearchStates.dc.html" aria-label="{{ r.label }}" style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px; color: inherit; text-decoration: none">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center"><span 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></span>
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px">
|
||||
<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; display: flex; align-items: baseline">
|
||||
<sc-if value="{{ r.hasBox }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 1 auto; min-width: 0; max-width: 124px; box-sizing: border-box; padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #667085">{{ r.boxLabel }}</span></sc-if>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums; white-space: nowrap">{{ r.time }}</span>
|
||||
</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 }}"><sc-for list="{{ r.subjectParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark>{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg aria-hidden="true" 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 aria-hidden="true" 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"><sc-for list="{{ r.previewParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark style="color: {{ p.fg }}">{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
</span>
|
||||
</a>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" value="김" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s6-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s6-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p role="status" style="flex: 0 0 auto; margin: 0; height: 36px; box-sizing: border-box; padding: 0 16px; font-size: 13px; line-height: 36px; color: #667085; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">‘김’ · 2통</p>
|
||||
<div role="status" style="flex: 0 0 auto; display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #E3EEEF; background: #F3F8F8; color: #344054">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0E7C86" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
||||
<p style="flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; line-height: 1.55; word-break: keep-all">한 글자로만 찾을 때는 본문은 빼고 제목, 보낸 사람과 받는 사람, 첨부 파일 이름에서 찾습니다. 본문까지 찾으려면 두 글자 이상으로 찾아 주세요.</p>
|
||||
</div>
|
||||
<ul aria-label="검색 결과" style="flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 24px">
|
||||
<sc-for list="{{ rows6 }}" as="r" hint-placeholder-count="2">
|
||||
<li style="border-bottom: 1px solid #F2F4F7; background: #FFFFFF">
|
||||
<a href="App1SearchStates.dc.html" aria-label="{{ r.label }}" style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px; color: inherit; text-decoration: none">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center"><span 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></span>
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px">
|
||||
<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; display: flex; align-items: baseline">
|
||||
<sc-if value="{{ r.hasBox }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 1 auto; min-width: 0; max-width: 124px; box-sizing: border-box; padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #667085">{{ r.boxLabel }}</span></sc-if>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums; white-space: nowrap">{{ r.time }}</span>
|
||||
</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 }}"><sc-for list="{{ r.subjectParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark>{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg aria-hidden="true" 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 aria-hidden="true" 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"><sc-for list="{{ r.previewParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark style="color: {{ p.fg }}">{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
</span>
|
||||
</a>
|
||||
</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>
|
||||
</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">{{ b7Title }}</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">
|
||||
<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>
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" value="해지 통보" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s7-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s7-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p role="status" style="flex: 0 0 auto; margin: 0; height: 36px; box-sizing: border-box; padding: 0 16px; font-size: 13px; line-height: 36px; color: #667085; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">‘해지 통보’ · 0통</p>
|
||||
<sc-if value="{{ b7Indexing }}" hint-placeholder-val="{{ false }}">
|
||||
<div role="status" style="flex: 0 0 auto; display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #E3EEEF; background: #F3F8F8; color: #344054">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0E7C86" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
||||
<p style="flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; line-height: 1.55; word-break: keep-all">지난 메일을 검색할 수 있게 밤사이에 준비하고 있습니다. 메일이 많으면 며칠 걸릴 수 있고, 그동안은 낱말이 통째로 같은 메일만 찾습니다.</p>
|
||||
</div>
|
||||
</sc-if>
|
||||
<div style="flex: 1 1 auto; min-height: 0; 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"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></span>
|
||||
<h2 style="margin: 4px 0 0; font-size: 15px; line-height: 1.5; font-weight: 650; word-break: keep-all">‘해지 통보’에 맞는 메일이 없습니다</h2>
|
||||
<p style="margin: 0; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">다른 말로 찾아 보세요.</p>
|
||||
<sc-if value="{{ b7Indexing }}" hint-placeholder-val="{{ false }}">
|
||||
<p style="margin: 0; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">준비가 끝나기 전에는 ‘서버이전’의 ‘서버’처럼 붙여 쓴 말의 일부나, 제목 맨 앞의 [공지]나 Re: 같은 말머리로는 찾지 못합니다.</p>
|
||||
</sc-if>
|
||||
<button type="button" style="min-height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: #0E7C86; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">전체 메일함에서 찾기</button>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"previewMarkText":{"editor":"enum","options":["그대로 #667085","진하게 #4A5363"],"default":"진하게 #4A5363"},"$preview":{"width":3098,"height":1028}}'>
|
||||
class Component extends DCLogic {
|
||||
state = { b7: null };
|
||||
|
||||
// 계획서 8절의 예시 메일 — ⟦ ⟧ 안이 맞은 말(바탕만 노랑 #FCE7A4)
|
||||
mails() {
|
||||
return {
|
||||
doyun: { who: '이도윤', initial: '이', time: '오전 10:42', subject: 'Re: 유지보수 ⟦계약⟧ 갱신 건', preview: '말씀하신 조건으로 ⟦계약⟧서 초안을 고쳐 첨부했습니다. 기간은 1년이고, 단가는…', unread: true, att: true },
|
||||
hr: { who: '인사팀', initial: '인', time: '오전 9:05', subject: '[공지] ⟦계약⟧직 채용 일정 안내', preview: '11월 ⟦계약⟧직 채용 일정을 알려 드립니다. 서류 접수는 11월 14일(금)까지…' },
|
||||
jihoon: { who: '박지훈', initial: '박', time: '11월 4일', subject: '견적서 보내 드립니다', preview: '…지난달 ⟦계약⟧ 기간에 맞춰 단가를 다시 계산했습니다. 확인 부탁드…', att: true, flag: true },
|
||||
doyunOld: { who: '이도윤', initial: '이', time: '10월 29일', subject: '회신: 유지보수 ⟦계약⟧ 갱신 건', preview: '네, 확인했습니다. 단가와 기간을 정리해서 다음 주 초에…' },
|
||||
draft: { who: '받는 사람: 박지훈', initial: '박', time: '어제', subject: '⟦계약⟧ 조건 확인 요청', preview: '지난번 말씀하신 조건을 정리했습니다.', box: '임시보관함' },
|
||||
sent: { who: '받는 사람: 이도윤', initial: '이', time: '10월 28일', subject: '유지보수 ⟦계약⟧ 갱신 건', preview: '⟦계약⟧ 기간과 단가를 확인해 주세요.', box: '보낸편지함' },
|
||||
};
|
||||
}
|
||||
|
||||
// 검색 준비 중 — 낱말이 통째로 같은 메일만(박지훈 본문의 "지난달 계약 기간에"도 맞는다), 강조 없이 지금 미리 보기(본문 첫 부분)
|
||||
indexingMails() {
|
||||
return [
|
||||
{ who: '이도윤', initial: '이', time: '오전 10:42', subject: 'Re: 유지보수 계약 갱신 건', preview: '말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다. 기간은 1년이고, 단가는 작년과 같습니다.', unread: true, att: true },
|
||||
{ who: '박지훈', initial: '박', time: '11월 4일', subject: '견적서 보내 드립니다', preview: '안녕하세요, 박지훈입니다. 요청하신 견적서를 첨부했습니다. 지난달 계약 기간에 맞춰 단가를 다시 계산했습니다.', att: true, flag: true },
|
||||
{ who: '이도윤', initial: '이', time: '10월 29일', subject: '회신: 유지보수 계약 갱신 건', preview: '네, 확인했습니다. 단가와 기간을 정리해서 다음 주 초에 보내 드리겠습니다.' },
|
||||
];
|
||||
}
|
||||
|
||||
// 한 글자 '김' — 보낸 사람으로 맞아 제목 · 미리 보기에 강조가 없다
|
||||
singleCharMails() {
|
||||
return [
|
||||
{ who: '김민수', initial: '김', time: '10월 30일', subject: '회의실 예약 변경', preview: '목요일 회의를 3층 큰 회의실로 옮겼습니다.' },
|
||||
{ who: '김민수', initial: '김', time: '10월 21일', subject: '주간 업무 보고', preview: '이번 주 진행한 일을 정리했습니다.' },
|
||||
];
|
||||
}
|
||||
|
||||
// 글을 ⟦ ⟧ 기준으로 조각낸다 — hit 는 노랑 바탕, fg 는 강조 안의 글자색
|
||||
parts(text, fg) {
|
||||
const out = [];
|
||||
let rest = text;
|
||||
while (rest.length > 0) {
|
||||
const open = rest.indexOf('⟦');
|
||||
if (open < 0) {
|
||||
out.push({ t: rest, hit: false, plain: true, fg: fg });
|
||||
break;
|
||||
}
|
||||
if (open > 0) out.push({ t: rest.slice(0, open), hit: false, plain: true, fg: fg });
|
||||
const close = rest.indexOf('⟧', open + 1);
|
||||
const end = close < 0 ? rest.length : close;
|
||||
out.push({ t: rest.slice(open + 1, end), hit: true, plain: false, fg: fg });
|
||||
rest = close < 0 ? '' : rest.slice(close + 1);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
plain(text) {
|
||||
return text.split('⟦').join('').split('⟧').join('');
|
||||
}
|
||||
|
||||
// 목록 줄 하나 — App1MailList 의 줄 그대로(사진은 단추가 아니다), 전체 메일함이면 시각 앞에 메일함
|
||||
row(m, markFg) {
|
||||
const unread = !!m.unread;
|
||||
const box = m.box || '';
|
||||
return {
|
||||
who: m.who,
|
||||
initial: m.initial,
|
||||
time: m.time,
|
||||
hasBox: box !== '',
|
||||
boxLabel: box !== '' ? box + ' ·' : '',
|
||||
att: !!m.att,
|
||||
flag: !!m.flag,
|
||||
fw: unread ? '650' : '450',
|
||||
subFw: unread ? '600' : '400',
|
||||
subColor: unread ? '#171C26' : '#344054',
|
||||
timeFw: unread ? '600' : '400',
|
||||
timeColor: unread ? '#171C26' : '#667085',
|
||||
subjectParts: this.parts(m.subject, 'inherit'),
|
||||
previewParts: this.parts(m.preview, markFg),
|
||||
// 낭독: 안 읽음, 보낸 사람, 메일함, 시각, 제목, 첨부 있음, 중요, 미리 보기 — 강조는 읽지 않는다
|
||||
label: [unread ? '안 읽음' : '', m.who, box, m.time, this.plain(m.subject), m.att ? '첨부 있음' : '', m.flag ? '중요' : '', this.plain(m.preview)].filter((s) => s !== '').join(', '),
|
||||
};
|
||||
}
|
||||
|
||||
renderVals() {
|
||||
// 미리 보기 강조 안 글자 — 기본은 진하게(#4A5363 = 웹 --color-text-secondary, #FCE7A4 위 6.3:1). '그대로'는 #667085(4.05:1)
|
||||
const strong = (this.props.previewMarkText ?? '진하게 #4A5363') === '진하게 #4A5363';
|
||||
const markFg = strong ? '#4A5363' : 'inherit';
|
||||
const row = (m) => this.row(m, markFg);
|
||||
const M = this.mails();
|
||||
const inbox = (m) => ({ ...m, box: '받은편지함' });
|
||||
const many = (n) => Array.from({ length: n }, (_, i) => ({ i: i }));
|
||||
const mode = this.state.b7 ?? 'normal';
|
||||
const MODES = [
|
||||
{ id: 'normal', label: '평소' },
|
||||
{ id: 'indexing', label: '준비 중일 때' },
|
||||
];
|
||||
return {
|
||||
skel: many(8),
|
||||
kb10: many(10),
|
||||
kb9: many(9),
|
||||
kb7: many(7),
|
||||
rows3: [M.doyun, M.hr, M.jihoon, M.doyunOld].map(row),
|
||||
rows4: [inbox(M.doyun), inbox(M.hr), M.draft, inbox(M.jihoon), inbox(M.doyunOld), M.sent].map(row),
|
||||
rows5: this.indexingMails().map(row),
|
||||
rows6: this.singleCharMails().map(row),
|
||||
b7Indexing: mode === 'indexing',
|
||||
b7Title: mode === 'indexing' ? '결과 없음 · 검색 준비 중일 때' : '결과 없음',
|
||||
b7Modes: MODES.map((x) => {
|
||||
const on = x.id === mode;
|
||||
return {
|
||||
label: x.label,
|
||||
pressed: on ? 'true' : 'false',
|
||||
pick: () => this.setState({ b7: x.id }),
|
||||
bg: on ? '#E3F2F3' : '#FFFFFF',
|
||||
fg: on ? '#0A5F67' : '#344054',
|
||||
border: on ? '#0E7C86' : '#D0D5DD',
|
||||
};
|
||||
}),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,396 @@
|
||||
<!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}
|
||||
mark{background:#FCE7A4;color:inherit}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="width: 2660px; 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 style="display: flex; justify-content: flex-start; height: 48px">
|
||||
<div role="group" aria-label="아직 못 찾음 상태 고르기" style="flex: 0 0 390px; display: flex; gap: 8px">
|
||||
<sc-for list="{{ b8Modes }}" as="s" hint-placeholder-count="2">
|
||||
<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>
|
||||
<div style="display: flex; gap: 48px; align-items: flex-start">
|
||||
|
||||
<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">{{ b8Title }}</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">
|
||||
<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>
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" value="정산서" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s8-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s8-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin: -4px 0 0; padding: 0 16px 12px; font-size: 13px; line-height: 1.5; color: #667085; word-break: keep-all">휴지통과 스팸메일함은 빼고 찾습니다</p>
|
||||
</div>
|
||||
<p role="status" style="flex: 0 0 auto; margin: 0; height: 36px; box-sizing: border-box; padding: 0 16px; font-size: 13px; line-height: 36px; color: #667085; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">‘정산서’</p>
|
||||
<div style="flex: 1 1 auto; min-height: 0; 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"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></span>
|
||||
<h2 style="margin: 4px 0 0; font-size: 15px; line-height: 1.5; font-weight: 650; word-break: keep-all">아직 맞는 메일을 찾지 못했습니다</h2>
|
||||
<p style="margin: 0; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">메일이 많아 한 번에 다 찾지 못했습니다. [더 찾기]를 누르면 이어서 찾습니다.</p>
|
||||
<sc-if value="{{ b8Before }}" hint-placeholder-val="{{ true }}">
|
||||
<button type="button" onClick="{{ b8Press }}" style="min-height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: #0E7C86; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">더 찾기</button>
|
||||
</sc-if>
|
||||
<sc-if value="{{ b8After }}" hint-placeholder-val="{{ false }}">
|
||||
<button type="button" aria-disabled="true" style="min-height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: #667085; font: inherit; font-size: 15px; font-weight: 600; cursor: default">찾는 중…</button>
|
||||
</sc-if>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" value="견적" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s9-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s9-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p role="status" style="flex: 0 0 auto; margin: 0; height: 36px; box-sizing: border-box; padding: 0 16px; font-size: 13px; line-height: 36px; color: #667085; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">‘견적’</p>
|
||||
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto">
|
||||
<ul aria-label="검색 결과" style="list-style: none; margin: 0; padding: 0">
|
||||
<sc-for list="{{ rows9 }}" as="r" hint-placeholder-count="3">
|
||||
<li style="border-bottom: 1px solid #F2F4F7; background: #FFFFFF">
|
||||
<a href="#s12" aria-label="{{ r.label }}" style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px; color: inherit; text-decoration: none">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center"><span 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></span>
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px">
|
||||
<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; display: flex; align-items: baseline">
|
||||
<sc-if value="{{ r.hasBox }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 1 auto; min-width: 0; max-width: 124px; box-sizing: border-box; padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #667085">{{ r.boxLabel }}</span></sc-if>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums; white-space: nowrap">{{ r.time }}</span>
|
||||
</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 }}"><sc-for list="{{ r.subjectParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark>{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg aria-hidden="true" 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 aria-hidden="true" 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"><sc-for list="{{ r.previewParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark style="color: {{ p.fg }}">{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</sc-for>
|
||||
</ul>
|
||||
<div style="display: flex; align-items: center; gap: 8px; min-height: 64px; box-sizing: border-box; padding: 8px 8px 8px 16px">
|
||||
<p style="flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; line-height: 1.55; color: #667085; word-break: keep-all">메일이 많아 한 번에 다 찾지 못했습니다. [더 찾기]를 누르면 이어서 찾습니다.</p>
|
||||
<button type="button" style="flex: 0 0 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #0E7C86; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">더 찾기</button>
|
||||
</div>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" value="계약" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s10-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s10-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-height: 0; 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: #FEF3F2; color: #B42318"><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"><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>
|
||||
<h2 style="margin: 4px 0 0; font-size: 15px; line-height: 1.5; font-weight: 650; word-break: keep-all">일시적인 시스템 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.</h2>
|
||||
<p style="margin: 0; font-size: 13px; line-height: 1.6; color: #667085">문의 코드 3f1c0a2e</p>
|
||||
<button type="button" style="min-height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: #0E7C86; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">다시 시도</button>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
<textarea enterkeyhint="search" autocomplete="off" maxlength="200" rows="2" aria-label="메일 검색" placeholder="메일 검색" style="flex: 1 1 auto; min-width: 0; display: block; height: 48px; box-sizing: border-box; padding: 1px 4px; border: 0; outline: none; resize: none; overflow: hidden; background: transparent; font: inherit; font-size: 16px; line-height: 23px; color: #171C26; caret-color: #0E7C86; word-break: keep-all">11월 정기 점검 일정 안내 메일 다시 보내 주세요</textarea>
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s11-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s11-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1 1 auto; min-height: 0; 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"><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>
|
||||
<h2 style="margin: 4px 0 0; font-size: 15px; line-height: 1.5; font-weight: 650; word-break: keep-all">찾을 말이 너무 많습니다</h2>
|
||||
<p style="margin: 0; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">검색어의 낱말은 8개까지 찾을 수 있습니다. 낱말을 줄여 주세요.</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="s12" 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: 2px; height: 56px; box-sizing: border-box; padding: 0 4px; background: #FFFFFF">
|
||||
<a href="App1Search.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="s12-subject">
|
||||
<h1 id="s12-subject" style="margin: 0; padding: 6px 20px 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">Re: 유지보수 <mark>계약</mark> 갱신 건</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>받는 사람 나</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>
|
||||
<p style="margin: 0; display: flex; gap: 8px; font-size: 13px; line-height: 1.5"><span style="color: #667085">메일함</span><span style="color: #344054">받은편지함</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<section aria-labelledby="s12-att" style="margin: 16px 16px 12px; padding-top: 16px; border-top: 1px solid #EEF0F3; display: flex; flex-direction: column; gap: 8px">
|
||||
<h2 id="s12-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"><mark>계약</mark>서_초안_v2.pdf</span>
|
||||
<span style="font-size: 12.5px; color: #667085">248 KB</span>
|
||||
</div>
|
||||
<button type="button" aria-label="계약서_초안_v2.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>
|
||||
<div style="padding: 16px 20px 20px; font-size: 15px; line-height: 1.75; color: #1F2733; white-space: pre-line">도윤입니다.
|
||||
|
||||
말씀하신 조건으로 <mark style="background: #FCE7A4; color: inherit; border-radius: 2px; padding: 0 1px">계약</mark>서 초안을 고쳐 첨부했습니다. 기간은 1년이고, 단가는 작년과 같습니다.
|
||||
|
||||
<mark style="background: #FCE7A4; color: inherit; border-radius: 2px; padding: 0 1px">계약</mark> 시작일만 확인 부탁드립니다.</div>
|
||||
</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 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">
|
||||
<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>
|
||||
<input type="text" enterkeyhint="search" autocomplete="off" maxlength="200" aria-label="메일 검색" placeholder="메일 검색" value="계약" style="flex: 1 1 auto; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #171C26; caret-color: #0E7C86">
|
||||
<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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
|
||||
</header>
|
||||
<div style="flex: 0 0 auto; border-bottom: 1px solid #EEF0F3; background: #FBFBFC">
|
||||
<div style="display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 16px">
|
||||
<span id="s13-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
|
||||
<div role="group" aria-labelledby="s13-scope" style="flex: 1 1 auto; min-width: 0; display: flex">
|
||||
<button type="button" aria-pressed="true" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-radius: 20px 0 0 20px; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 700; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">받은편지함</span></button>
|
||||
<button type="button" aria-pressed="false" style="flex: 1 1 0; min-width: 0; height: 48px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer"><span style="flex: 1 1 auto; min-width: 0; display: block; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D0D5DD; border-left: 0; border-radius: 0 20px 20px 0; background: #FFFFFF; color: #344054; font-size: 14px; font-weight: 500; line-height: 38px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">전체 메일함</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p role="status" style="flex: 0 0 auto; margin: 0; height: 36px; box-sizing: border-box; padding: 0 16px; font-size: 13px; line-height: 36px; color: #667085; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ count13 }}</p>
|
||||
<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="{{ rows13 }}" as="r" hint-placeholder-count="3">
|
||||
<li style="border-bottom: 1px solid #F2F4F7; background: #FFFFFF">
|
||||
<a href="#s12" aria-label="{{ r.label }}" style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px; color: inherit; text-decoration: none">
|
||||
<span aria-hidden="true" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center"><span 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></span>
|
||||
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px">
|
||||
<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; display: flex; align-items: baseline">
|
||||
<sc-if value="{{ r.hasBox }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 1 auto; min-width: 0; max-width: 124px; box-sizing: border-box; padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #667085">{{ r.boxLabel }}</span></sc-if>
|
||||
<span style="flex: 0 0 auto; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums; white-space: nowrap">{{ r.time }}</span>
|
||||
</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 }}"><sc-for list="{{ r.subjectParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark>{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg aria-hidden="true" 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 aria-hidden="true" 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"><sc-for list="{{ r.previewParts }}" as="p" hint-placeholder-count="1"><sc-if value="{{ p.hit }}" hint-placeholder-val="{{ false }}"><mark style="color: {{ p.fg }}">{{ p.t }}</mark></sc-if><sc-if value="{{ p.plain }}" hint-placeholder-val="{{ true }}"><span>{{ p.t }}</span></sc-if></sc-for></span>
|
||||
</span>
|
||||
</a>
|
||||
</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>
|
||||
<sc-if value="{{ hasToast }}" hint-placeholder-val="{{ true }}">
|
||||
<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">메일 1통을 휴지통으로 옮겼습니다.</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>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props='{"previewMarkText":{"editor":"enum","options":["그대로 #667085","진하게 #4A5363"],"default":"진하게 #4A5363"},"$preview":{"width":2660,"height":1028}}'>
|
||||
class Component extends DCLogic {
|
||||
state = { b8: null, restored: false };
|
||||
|
||||
// 예시 메일 — ⟦ ⟧ 안이 맞은 말(바탕만 노랑 #FCE7A4). '견적' 셋은 계획서에 줄이 없어 App1MailList 의 사람으로 지었다
|
||||
mails() {
|
||||
return {
|
||||
junho: { who: '박준호', initial: '박', time: '오전 8:31', subject: '11월 인프라 점검 일정 조율', preview: '…교체할 장비의 ⟦견적⟧은 금요일까지 받아 두겠습니다.', unread: true, flag: true },
|
||||
jihoonQuote: { who: '박지훈', initial: '박', time: '11월 4일', subject: '⟦견적⟧서 보내 드립니다', preview: '안녕하세요, 박지훈입니다. 요청하신 ⟦견적⟧서를 첨부했습니다. 지난달 계약 기간에…', att: true, flag: true },
|
||||
seoyeon: { who: '최서연', initial: '최', time: '11월 3일', subject: '11월 비용 정산 안내', preview: '…외부 업체에서 받은 ⟦견적⟧서도 영수증과 함께 올려 주세요.', att: true },
|
||||
// 결과에서 열어 읽은 뒤 지운 메일 — [되돌리기]로 돌아오면 읽음(굵지 않게)으로 맨 위에 다시 들어간다
|
||||
doyunRead: { who: '이도윤', initial: '이', time: '오전 10:42', subject: 'Re: 유지보수 ⟦계약⟧ 갱신 건', preview: '말씀하신 조건으로 ⟦계약⟧서 초안을 고쳐 첨부했습니다. 기간은 1년이고, 단가는…', att: true },
|
||||
hr: { who: '인사팀', initial: '인', time: '오전 9:05', subject: '[공지] ⟦계약⟧직 채용 일정 안내', preview: '11월 ⟦계약⟧직 채용 일정을 알려 드립니다. 서류 접수는 11월 14일(금)까지…' },
|
||||
jihoon: { who: '박지훈', initial: '박', time: '11월 4일', subject: '견적서 보내 드립니다', preview: '…지난달 ⟦계약⟧ 기간에 맞춰 단가를 다시 계산했습니다. 확인 부탁드…', att: true, flag: true },
|
||||
doyunOld: { who: '이도윤', initial: '이', time: '10월 29일', subject: '회신: 유지보수 ⟦계약⟧ 갱신 건', preview: '네, 확인했습니다. 단가와 기간을 정리해서 다음 주 초에…' },
|
||||
};
|
||||
}
|
||||
|
||||
// 글을 ⟦ ⟧ 기준으로 조각낸다 — hit 는 노랑 바탕, fg 는 강조 안의 글자색
|
||||
parts(text, fg) {
|
||||
const out = [];
|
||||
let rest = text;
|
||||
while (rest.length > 0) {
|
||||
const open = rest.indexOf('⟦');
|
||||
if (open < 0) {
|
||||
out.push({ t: rest, hit: false, plain: true, fg: fg });
|
||||
break;
|
||||
}
|
||||
if (open > 0) out.push({ t: rest.slice(0, open), hit: false, plain: true, fg: fg });
|
||||
const close = rest.indexOf('⟧', open + 1);
|
||||
const end = close < 0 ? rest.length : close;
|
||||
out.push({ t: rest.slice(open + 1, end), hit: true, plain: false, fg: fg });
|
||||
rest = close < 0 ? '' : rest.slice(close + 1);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
plain(text) {
|
||||
return text.split('⟦').join('').split('⟧').join('');
|
||||
}
|
||||
|
||||
// 목록 줄 하나 — App1MailList 의 줄 그대로(사진은 단추가 아니다)
|
||||
row(m, markFg) {
|
||||
const unread = !!m.unread;
|
||||
const box = m.box || '';
|
||||
return {
|
||||
who: m.who,
|
||||
initial: m.initial,
|
||||
time: m.time,
|
||||
hasBox: box !== '',
|
||||
boxLabel: box !== '' ? box + ' ·' : '',
|
||||
att: !!m.att,
|
||||
flag: !!m.flag,
|
||||
fw: unread ? '650' : '450',
|
||||
subFw: unread ? '600' : '400',
|
||||
subColor: unread ? '#171C26' : '#344054',
|
||||
timeFw: unread ? '600' : '400',
|
||||
timeColor: unread ? '#171C26' : '#667085',
|
||||
subjectParts: this.parts(m.subject, 'inherit'),
|
||||
previewParts: this.parts(m.preview, markFg),
|
||||
// 낭독: 안 읽음, 보낸 사람, 메일함, 시각, 제목, 첨부 있음, 중요, 미리 보기 — 강조는 읽지 않는다
|
||||
label: [unread ? '안 읽음' : '', m.who, box, m.time, this.plain(m.subject), m.att ? '첨부 있음' : '', m.flag ? '중요' : '', this.plain(m.preview)].filter((s) => s !== '').join(', '),
|
||||
};
|
||||
}
|
||||
|
||||
renderVals() {
|
||||
// 미리 보기 강조 안 글자 — 기본은 진하게(#4A5363 = 웹 --color-text-secondary, #FCE7A4 위 6.3:1). '그대로'는 #667085(4.05:1)
|
||||
const strong = (this.props.previewMarkText ?? '진하게 #4A5363') === '진하게 #4A5363';
|
||||
const markFg = strong ? '#4A5363' : 'inherit';
|
||||
const row = (m) => this.row(m, markFg);
|
||||
const M = this.mails();
|
||||
const mode = this.state.b8 ?? 'before';
|
||||
const restored = !!this.state.restored;
|
||||
const MODES = [
|
||||
{ id: 'before', label: '누르기 전' },
|
||||
{ id: 'after', label: '누른 뒤' },
|
||||
];
|
||||
return {
|
||||
b8Before: mode !== 'after',
|
||||
b8After: mode === 'after',
|
||||
b8Title: mode === 'after' ? '아직 못 찾음 · [더 찾기]를 누른 뒤' : '아직 못 찾음',
|
||||
b8Press: () => this.setState({ b8: 'after' }),
|
||||
b8Modes: MODES.map((x) => {
|
||||
const on = x.id === mode;
|
||||
return {
|
||||
label: x.label,
|
||||
pressed: on ? 'true' : 'false',
|
||||
pick: () => this.setState({ b8: x.id }),
|
||||
bg: on ? '#E3F2F3' : '#FFFFFF',
|
||||
fg: on ? '#0A5F67' : '#344054',
|
||||
border: on ? '#0E7C86' : '#D0D5DD',
|
||||
};
|
||||
}),
|
||||
rows9: [M.junho, M.jihoonQuote, M.seoyeon].map(row),
|
||||
rows13: (restored ? [M.doyunRead, M.hr, M.jihoon, M.doyunOld] : [M.hr, M.jihoon, M.doyunOld]).map(row),
|
||||
count13: restored ? '‘계약’ · 4통' : '‘계약’ · 3통',
|
||||
hasToast: !restored,
|
||||
undo: () => this.setState({ restored: true }),
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -54,9 +54,11 @@
|
||||
"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 }
|
||||
"App1Shell.dc.html": { "x": 6580, "y": 32000, "w": 2352, "h": 976, "title": "앱 · 틀 · 설정", "is_interactive": true },
|
||||
"App1Search.dc.html": { "x": 0, "y": 33450, "w": 3098, "h": 1028, "title": "앱 · 검색 (찾기 · 결과)", "is_interactive": true },
|
||||
"App1SearchStates.dc.html": { "x": 3178, "y": 33450, "w": 2660, "h": 1028, "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", "App1Login.dc.html", "App1MailList.dc.html", "App1Reader.dc.html", "App1Compose.dc.html", "App1Shell.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", "App1Search.dc.html", "App1SearchStates.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 },
|
||||
@@ -71,7 +73,8 @@
|
||||
"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 },
|
||||
"app1": { "x": 0, "y": 31700, "text": "앱 1단계 화면 — 로그인 · 메일 목록 · 읽기 · 쓰기 · 앱 틀 — 2026-11-05 확정(안드로이드 먼저)", "kind": "title1", "maxW": 8932 }
|
||||
"app1": { "x": 0, "y": 31700, "text": "앱 1단계 화면 — 로그인 · 메일 목록 · 읽기 · 쓰기 · 앱 틀 — 2026-11-05 확정(안드로이드 먼저)", "kind": "title1", "maxW": 8932 },
|
||||
"app1search": { "x": 0, "y": 33150, "text": "앱 1단계 검색 화면 — 찾기 · 결과 · 강조 · 이어 찾기 · 안내 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 5838 }
|
||||
},
|
||||
"designSystems": []
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user