feat(flutter): 앱 첫 판 화면 — 로그인 · 메일 목록 · 읽기 · 쓰기 · 검색 · 새 메일 알림 #21

Merged
ttipo merged 34 commits from feat/app-push into main 2026-11-08 16:34:38 +09:00
2 changed files with 604 additions and 3 deletions
Showing only changes of commit bec78bce42 - Show all commits
@@ -0,0 +1,599 @@
<!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}
.cf{display:block;width:100%;height:52px;box-sizing:border-box;margin:0;padding:0 12px;border:1px solid #8A94A3;border-radius:8px;background:#FFFFFF;font:inherit;font-size:16px;color:#171C26;caret-color:#0E7C86}
.cf:focus,.cf:focus-visible{outline:none;border-color:#0E7C86;box-shadow:inset 0 0 0 1px #0E7C86}
</style>
</helmet>
<div style="width: 1784px; 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; gap: 48px; height: 48px">
<div role="group" aria-label="조건으로 찾기 상태 고르기" style="flex: 0 0 390px; display: flex; gap: 8px">
<sc-for list="{{ b14Modes }}" 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 role="group" aria-label="날짜 고르기 상태 고르기" style="flex: 0 0 390px; display: flex; gap: 8px">
<sc-for list="{{ b15Modes }}" 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 role="group" aria-label="조건이 걸린 결과 상태 고르기" style="flex: 0 0 390px; display: flex; gap: 8px">
<sc-for list="{{ b16Modes }}" 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 role="group" aria-label="조건에 맞는 메일이 없음 상태 고르기" style="flex: 0 0 390px; display: flex; gap: 8px">
<sc-for list="{{ b17Modes }}" 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">{{ b14Title }}</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="{{ q14 }}" 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>
<button type="button" aria-label="조건으로 찾기" aria-haspopup="dialog" aria-expanded="true" 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: #0A5F67; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3"><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="21" y1="4" x2="14" y2="4"></line><line x1="10" y1="4" x2="3" y2="4"></line><line x1="21" y1="12" x2="12" y2="12"></line><line x1="8" y1="12" x2="3" y2="12"></line><line x1="21" y1="20" x2="16" y2="20"></line><line x1="12" y1="20" x2="3" y2="20"></line><line x1="14" y1="1" x2="14" y2="7"></line><line x1="8" y1="9" x2="8" y2="15"></line><line x1="16" y1="17" x2="16" y2="23"></line></svg></span></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="s14-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
<div role="group" aria-labelledby="s14-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="{{ rowsBg }}" 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 aria-hidden="true" style="position: absolute; inset: 0; background: rgba(11, 54, 64, 0.32)"></div>
<section role="dialog" aria-modal="true" aria-labelledby="s14-sheet-title" style="position: absolute; left: 0; right: 0; top: 96px; bottom: 0; display: flex; flex-direction: column; border-radius: 16px 16px 0 0; background: #FFFFFF; overflow: hidden">
<div aria-hidden="true" style="flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 48px"><span style="display: block; width: 32px; height: 4px; border-radius: 2px; background: #4A5363"></span></div>
<div style="flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 48px; box-sizing: border-box; padding: 0 4px 0 20px">
<h2 id="s14-sheet-title" style="flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; color: #171C26">조건으로 찾기</h2>
<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>
</div>
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto">
<div style="display: flex; flex-direction: column; gap: 16px; padding: 8px 20px 32px">
<div style="display: flex; flex-direction: column; gap: 8px">
<label for="s14-from" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">보낸 사람</label>
<input id="s14-from" class="cf" type="text" autocomplete="off" placeholder="이름이나 메일 주소" value="이도윤">
</div>
<div style="display: flex; flex-direction: column; gap: 8px">
<label for="s14-to" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">받는 사람</label>
<input id="s14-to" class="cf" type="text" autocomplete="off" placeholder="이름이나 메일 주소">
</div>
<div style="display: flex; flex-direction: column; gap: 8px">
<label for="s14-subject" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">제목</label>
<input id="s14-subject" class="cf" type="text" autocomplete="off" placeholder="제목에 든 말" value="{{ subj14 }}">
</div>
<div style="display: flex; flex-direction: column; gap: 8px">
<label for="s14-body" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">내용</label>
<input id="s14-body" class="cf" type="text" autocomplete="off" placeholder="내용에 든 말">
</div>
<div style="display: flex; flex-direction: column; gap: 8px">
<label for="s14-period" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">기간</label>
<span style="position: relative; display: block">
<select id="s14-period" class="cf" value="{{ period14 }}" onChange="{{ setPeriod14 }}" style="padding-right: 44px; appearance: none; -webkit-appearance: none; cursor: pointer">
<option value="all">전체 기간</option>
<option value="week">최근 1주</option>
<option value="month">최근 1달</option>
<option value="quarter">최근 3달</option>
<option value="year">최근 1년</option>
<option value="custom">날짜 고르기</option>
</select>
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; right: 14px; top: 16px; pointer-events: none"><polyline points="6 9 12 15 18 9"></polyline></svg>
</span>
<sc-if value="{{ custom14 }}" hint-placeholder-val="{{ false }}">
<div style="display: flex; gap: 12px">
<div style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px">
<span id="s14-start-label" style="font-size: 13px; line-height: 20px; font-weight: 700; color: #475467">시작 날짜</span>
<button type="button" aria-labelledby="s14-start-label" style="display: flex; align-items: center; justify-content: flex-end; height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF; color: #4A5363; font: inherit; 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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg></button>
</div>
<div style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px">
<span id="s14-end-label" style="font-size: 13px; line-height: 20px; font-weight: 700; color: #475467">끝 날짜</span>
<button type="button" aria-labelledby="s14-end-label" style="display: flex; align-items: center; justify-content: flex-end; height: 52px; box-sizing: border-box; padding: 0 14px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF; color: #4A5363; font: inherit; 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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg></button>
</div>
</div>
</sc-if>
</div>
<div role="group" aria-labelledby="s14-att" style="display: flex; flex-direction: column">
<span id="s14-att" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">첨부</span>
<label style="display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0 -20px; padding: 0 20px; cursor: pointer">
<input type="checkbox" checked="{{ att14 }}" onChange="{{ toggleAtt14 }}" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #0E7C86; cursor: pointer">
<span style="font-size: 15px; color: #171C26">첨부 파일이 있는 메일만</span>
</label>
</div>
<p style="margin: 0; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">검색 칸에 쓴 말이 들어 있고 이 조건에도 맞는 메일을 찾습니다. 받는 사람으로 찾을 때는 참조로 받은 사람까지 찾습니다.</p>
</div>
</div>
<div style="flex: 0 0 auto; border-top: 1px solid #EEF0F3; background: #FFFFFF">
<sc-if value="{{ tooMany14 }}" hint-placeholder-val="{{ false }}">
<p role="alert" style="display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 20px 0; font-size: 13px; line-height: 1.55; color: #B42318; word-break: keep-all"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg><span style="flex: 1 1 auto; min-width: 0">검색 칸과 [조건]에 넣은 낱말은 모두 합쳐 8개까지입니다. 낱말을 몇 개 줄여 주세요.</span></p>
</sc-if>
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 12px 8px">
<button type="button" style="flex: 0 0 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">조건 지우기</button>
<button type="button" style="flex: 0 0 auto; min-width: 120px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">찾기</button>
</div>
</div>
</section>
</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">{{ b15Title }}</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>
<button type="button" aria-label="조건으로 찾기" aria-haspopup="dialog" aria-expanded="true" 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: #0A5F67; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3"><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="21" y1="4" x2="14" y2="4"></line><line x1="10" y1="4" x2="3" y2="4"></line><line x1="21" y1="12" x2="12" y2="12"></line><line x1="8" y1="12" x2="3" y2="12"></line><line x1="21" y1="20" x2="16" y2="20"></line><line x1="12" y1="20" x2="3" y2="20"></line><line x1="14" y1="1" x2="14" y2="7"></line><line x1="8" y1="9" x2="8" y2="15"></line><line x1="16" y1="17" x2="16" y2="23"></line></svg></span></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="s15-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
<div role="group" aria-labelledby="s15-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="{{ rowsBg }}" 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 aria-hidden="true" style="position: absolute; inset: 0; background: rgba(11, 54, 64, 0.32)"></div>
<section role="dialog" aria-modal="true" aria-labelledby="s15-sheet-title" style="position: absolute; left: 0; right: 0; top: 96px; bottom: 0; display: flex; flex-direction: column; border-radius: 16px 16px 0 0; background: #FFFFFF; overflow: hidden">
<div aria-hidden="true" style="flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 48px"><span style="display: block; width: 32px; height: 4px; border-radius: 2px; background: #4A5363"></span></div>
<div style="flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 49px; box-sizing: border-box; padding: 0 4px 0 20px; border-bottom: 1px solid #EEF0F3">
<h2 id="s15-sheet-title" style="flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; color: #171C26">조건으로 찾기</h2>
<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>
</div>
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column-reverse">
<div style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 16px; padding: 8px 20px 32px">
<div style="display: flex; flex-direction: column; gap: 8px">
<label for="s15-from" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">보낸 사람</label>
<input id="s15-from" class="cf" type="text" autocomplete="off" placeholder="이름이나 메일 주소" value="이도윤">
</div>
<div style="display: flex; flex-direction: column; gap: 8px">
<label for="s15-to" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">받는 사람</label>
<input id="s15-to" class="cf" type="text" autocomplete="off" placeholder="이름이나 메일 주소">
</div>
<div style="display: flex; flex-direction: column; gap: 8px">
<label for="s15-subject" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">제목</label>
<input id="s15-subject" class="cf" type="text" autocomplete="off" placeholder="제목에 든 말">
</div>
<div style="display: flex; flex-direction: column; gap: 8px">
<label for="s15-body" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">내용</label>
<input id="s15-body" class="cf" type="text" autocomplete="off" placeholder="내용에 든 말">
</div>
<div style="display: flex; flex-direction: column; gap: 8px">
<label for="s15-period" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">기간</label>
<span style="position: relative; display: block">
<select id="s15-period" class="cf" value="{{ period15 }}" onChange="{{ setPeriod15 }}" style="padding-right: 44px; appearance: none; -webkit-appearance: none; cursor: pointer">
<option value="all">전체 기간</option>
<option value="week">최근 1주</option>
<option value="month">최근 1달</option>
<option value="quarter">최근 3달</option>
<option value="year">최근 1년</option>
<option value="custom">날짜 고르기</option>
</select>
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; right: 14px; top: 16px; pointer-events: none"><polyline points="6 9 12 15 18 9"></polyline></svg>
</span>
<sc-if value="{{ custom15 }}" hint-placeholder-val="{{ true }}">
<div style="display: flex; gap: 12px">
<div style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px">
<span id="s15-start-label" style="font-size: 13px; line-height: 20px; font-weight: 700; color: #475467">시작 날짜</span>
<div style="display: flex; align-items: center; height: 52px; box-sizing: border-box; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
<button type="button" aria-labelledby="s15-start-label s15-start-value" onClick="{{ openPicker }}" style="flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: center; padding: 0 0 0 12px; border: 0; border-radius: 7px 0 0 7px; background: transparent; color: #171C26; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer"><span id="s15-start-value" style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">2026. 11. 7.</span></button>
<button type="button" aria-label="시작 날짜 지우기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4A5363; cursor: pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
</div>
</div>
<div style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px">
<span id="s15-end-label" style="font-size: 13px; line-height: 20px; font-weight: 700; color: #475467">끝 날짜</span>
<div style="display: flex; align-items: center; height: 52px; box-sizing: border-box; border: 1px solid #B42318; border-radius: 8px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #B42318">
<button type="button" aria-labelledby="s15-end-label s15-end-value" aria-describedby="s15-date-error" style="flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: center; padding: 0 0 0 12px; border: 0; border-radius: 7px 0 0 7px; background: transparent; color: #171C26; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer"><span id="s15-end-value" style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">2026. 10. 1.</span></button>
<button type="button" aria-label="끝 날짜 지우기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #4A5363; cursor: pointer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
</div>
</div>
</div>
<p id="s15-date-error" aria-live="polite" style="margin: 0; font-size: 13px; line-height: 20px; color: #B42318; word-break: keep-all">끝 날짜를 시작 날짜와 같거나 그 뒤로 골라 주세요.</p>
</sc-if>
</div>
<div role="group" aria-labelledby="s15-att" style="display: flex; flex-direction: column">
<span id="s15-att" style="font-size: 15px; line-height: 22px; font-weight: 700; color: #344054">첨부</span>
<label style="display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0 -20px; padding: 0 20px; cursor: pointer">
<input type="checkbox" checked="{{ att15 }}" onChange="{{ toggleAtt15 }}" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #0E7C86; cursor: pointer">
<span style="font-size: 15px; color: #171C26">첨부 파일이 있는 메일만</span>
</label>
</div>
<p style="margin: 0; font-size: 13px; line-height: 1.6; color: #667085; word-break: keep-all">검색 칸에 쓴 말이 들어 있고 이 조건에도 맞는 메일을 찾습니다. 받는 사람으로 찾을 때는 참조로 받은 사람까지 찾습니다.</p>
</div>
</div>
<div style="flex: 0 0 auto; border-top: 1px solid #EEF0F3; background: #FFFFFF">
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 12px 8px">
<button type="button" style="flex: 0 0 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">조건 지우기</button>
<button type="button" style="flex: 0 0 auto; min-width: 120px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">찾기</button>
</div>
</div>
</section>
<sc-if value="{{ pickerOpen }}" hint-placeholder-val="{{ false }}">
<div aria-hidden="true" style="position: absolute; inset: 0; background: rgba(11, 54, 64, 0.32)"></div>
<div role="dialog" aria-modal="true" aria-labelledby="s15-picker-help s15-picker-date" style="position: absolute; left: 16px; top: 138px; width: 358px; height: 568px; box-sizing: border-box; display: flex; flex-direction: column; border-radius: 28px; background: #F2F4F7; overflow: hidden">
<div style="flex: 0 0 auto; display: flex; flex-direction: column; height: 120px; box-sizing: border-box; padding: 16px 12px 12px 24px; color: #4A5363">
<span id="s15-picker-help" style="font-size: 15px; line-height: 1.3; font-weight: 600">시작 날짜</span>
<span style="flex: 1 1 auto"></span>
<div style="display: flex; align-items: center; gap: 8px">
<span id="s15-picker-date" style="flex: 1 1 auto; min-width: 0; font-size: 22px; line-height: 1.4; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">11월 7일 (토)</span>
<span aria-hidden="true" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center"><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"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg></span>
</div>
</div>
<div aria-hidden="true" style="flex: 0 0 auto; height: 1px; background: #E6E8EC"></div>
<div aria-hidden="true" style="flex: 1 1 auto; min-height: 0">
<div style="display: flex; align-items: center; height: 52px; box-sizing: border-box; padding: 0 4px 0 16px; color: #344054">
<span style="display: inline-flex; align-items: center; height: 52px; padding: 0 8px; font-size: 15px; font-weight: 600">2026년 11월<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z" fill="currentColor"></path></svg></span>
<span style="flex: 1 1 auto"></span>
<span style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center"><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"><polyline points="15 18 9 12 15 6"></polyline></svg></span>
<span style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; color: rgba(23, 28, 38, 0.38)"><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"><polyline points="9 18 15 12 9 6"></polyline></svg></span>
</div>
<div style="display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 48px; padding: 0 12px">
<sc-for list="{{ calCells }}" as="c" hint-placeholder-count="37"><span style="display: 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: {{ c.bg }}; color: {{ c.fg }}; font-size: 16px; font-variant-numeric: tabular-nums">{{ c.t }}</span></span></sc-for>
</div>
</div>
<div style="flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 0 8px">
<button type="button" onClick="{{ closePicker }}" style="min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0E7C86; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">취소</button>
<button type="button" onClick="{{ closePicker }}" style="min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0E7C86; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">확인</button>
</div>
</div>
</sc-if>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<h2 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ b16Title }}</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>
<button type="button" aria-label="{{ cond16Label }}" aria-haspopup="dialog" 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: {{ cond16Fg }}; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: {{ cond16Bg }}"><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="21" y1="4" x2="14" y2="4"></line><line x1="10" y1="4" x2="3" y2="4"></line><line x1="21" y1="12" x2="12" y2="12"></line><line x1="8" y1="12" x2="3" y2="12"></line><line x1="21" y1="20" x2="16" y2="20"></line><line x1="12" y1="20" x2="3" y2="20"></line><line x1="14" y1="1" x2="14" y2="7"></line><line x1="8" y1="9" x2="8" y2="15"></line><line x1="16" y1="17" x2="16" y2="23"></line></svg></span></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="s16-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
<div role="group" aria-labelledby="s16-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>
<sc-if value="{{ applied16 }}" hint-placeholder-val="{{ true }}">
<div style="flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 48px; box-sizing: border-box; padding: 0 8px 0 16px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<p style="flex: 1 1 auto; min-width: 0; margin: 0; padding: 6px 0; font-size: 13px; line-height: 1.55; color: #344054; word-break: keep-all">조건: 이도윤 님이 보낸 메일, 최근 1달, 첨부 있음</p>
<button type="button" style="flex: 0 0 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">조건 지우기</button>
</div>
</sc-if>
<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">{{ count16 }}</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="{{ rows16 }}" 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">{{ b17Title }}</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>
<sc-if value="{{ empty17 }}" hint-placeholder-val="{{ true }}">
<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">
</sc-if>
<sc-if value="{{ many17 }}" hint-placeholder-val="{{ false }}">
<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>
</sc-if>
<button type="button" aria-label="조건으로 찾기, 조건이 걸려 있음" aria-haspopup="dialog" 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: #0A5F67; cursor: pointer"><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E3F2F3"><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="21" y1="4" x2="14" y2="4"></line><line x1="10" y1="4" x2="3" y2="4"></line><line x1="21" y1="12" x2="12" y2="12"></line><line x1="8" y1="12" x2="3" y2="12"></line><line x1="21" y1="20" x2="16" y2="20"></line><line x1="12" y1="20" x2="3" y2="20"></line><line x1="14" y1="1" x2="14" y2="7"></line><line x1="8" y1="9" x2="8" y2="15"></line><line x1="16" y1="17" x2="16" y2="23"></line></svg></span></button>
</header>
<sc-if value="{{ empty17 }}" hint-placeholder-val="{{ true }}">
<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="s17-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
<div role="group" aria-labelledby="s17-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>
</sc-if>
<sc-if value="{{ many17 }}" hint-placeholder-val="{{ false }}">
<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="s17-scope" style="flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #475467">찾을 곳</span>
<div role="group" aria-labelledby="s17-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>
</sc-if>
<div style="flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 48px; box-sizing: border-box; padding: 0 8px 0 16px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<p style="flex: 1 1 auto; min-width: 0; margin: 0; padding: 6px 0; font-size: 13px; line-height: 1.55; color: #344054; word-break: keep-all">{{ cond17 }}</p>
<button type="button" style="flex: 0 0 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">조건 지우기</button>
</div>
<sc-if value="{{ empty17 }}" hint-placeholder-val="{{ true }}">
<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>
<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>
</div>
</sc-if>
<sc-if value="{{ many17 }}" hint-placeholder-val="{{ false }}">
<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>
</sc-if>
<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":1784,"height":1028}}'>
class Component extends DCLogic {
state = { b14: null, b15: null, b16: null, b17: null, period14: null, period15: null, att14: null, att15: null };
// 예시 메일 — 1차 보드(App1Search)의 같은 메일. ⟦ ⟧ 안이 맞은 말(바탕만 노랑 #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: '네, 확인했습니다. 단가와 기간을 정리해서 다음 주 초에…' },
// 16 의 둘째 줄 — 1차 보드에 없는 메일이라 미리 보기는 웹 보드(Search14)의 이도윤 메일 글을 썼다.
// 1차 보드처럼 서버가 준 한 줄 폭으로 줄였다(줄 끝에서 잘린 강조가 노란 조각으로 남지 않게)
doyunDraft: { who: '이도윤', initial: '이', time: '10월 28일', subject: '⟦계약⟧서 초안 보내 드립니다', preview: '지난번 말씀하신 ⟦계약⟧서 초안을 첨부했습니다. 단가는…', att: true },
};
}
// 글을 ⟦ ⟧ 기준으로 조각낸다 — 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('');
}
// 목록 줄 하나 — 1차 보드의 줄 그대로(사진은 단추가 아니다)
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(', '),
};
}
// 상태 고르기 단추 — 1차 보드와 같은 모양
modes(list, current, choose) {
return list.map((x) => {
const on = x.id === current;
return {
label: x.label,
pressed: on ? 'true' : 'false',
pick: () => choose(x.id),
bg: on ? '#E3F2F3' : '#FFFFFF',
fg: on ? '#0A5F67' : '#344054',
border: on ? '#0E7C86' : '#D0D5DD',
};
});
}
// 2026년 11월 — 1일이 일요일이다. 오늘(7일)을 골랐고, 오늘 뒤(8~30일)는 고를 수 없다
calendar() {
const head = ['일', '월', '화', '수', '목', '금', '토'].map((d) => ({ t: d, bg: 'transparent', fg: '#171C26' }));
const days = Array.from({ length: 30 }, (_, i) => {
const d = i + 1;
if (d === 7) return { t: '7', bg: '#0E7C86', fg: '#FFFFFF' };
return { t: String(d), bg: 'transparent', fg: d > 7 ? 'rgba(23, 28, 38, 0.38)' : '#171C26' };
});
return head.concat(days);
}
renderVals() {
// 미리 보기 강조 안 글자 — 기본은 진하게(#4A5363), '그대로'는 #667085 (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 st = this.state;
const m14 = st.b14 ?? 'pick';
const m15 = st.b15 ?? 'fields';
const m16 = st.b16 ?? 'applied';
const applied16 = m16 === 'applied';
const m17 = st.b17 ?? 'empty';
const period14 = st.period14 ?? 'month';
const period15 = st.period15 ?? 'custom';
const att14 = st.att14 ?? true;
const att15 = st.att15 ?? true;
return {
// 14 · 15 의 뒤 화면 — '계약'으로 찾은 받은편지함 결과(시트에 가려 위 막대만 보인다)
rowsBg: [M.doyun, M.hr, M.jihoon, M.doyunOld].map(row),
// 16 — 조건 걸림: 이도윤이 보낸 첨부 있는 메일 둘(최근 1달) / 조건 없음: 1차 보드 결과 화면의 같은 넷
rows16: (applied16 ? [M.doyun, M.doyunDraft] : [M.doyun, M.hr, M.jihoon, M.doyunOld]).map(row),
b16Modes: this.modes([{ id: 'applied', label: '조건 걸림' }, { id: 'none', label: '조건 없음' }], m16, (id) => this.setState({ b16: id })),
b16Title: applied16 ? '조건이 걸린 결과' : '조건 없이 찾은 결과',
applied16: applied16,
count16: applied16 ? '‘계약’ · 2통' : '‘계약’ · 4통',
// [조건] — 걸림은 옅은 청록 원 위 #0A5F67, 평소는 바탕 없이 #344054
cond16Label: applied16 ? '조건으로 찾기, 조건이 걸려 있음' : '조건으로 찾기',
cond16Fg: applied16 ? '#0A5F67' : '#344054',
cond16Bg: applied16 ? '#E3F2F3' : 'transparent',
b14Modes: this.modes([{ id: 'pick', label: '조건 고르기' }, { id: 'many', label: '낱말이 너무 많음' }], m14, (id) => this.setState({ b14: id, period14: null, att14: null })),
b14Title: m14 === 'many' ? '조건으로 찾기 · 낱말이 너무 많음' : '조건으로 찾기 (시트)',
// 낱말 수: 검색 칸 4 + 보낸 사람 1 + 제목 5 = 10 (8 넘음)
q14: m14 === 'many' ? '견적 단가 납품 일정' : '계약',
subj14: m14 === 'many' ? '계약 갱신 확인 요청 건' : '',
tooMany14: m14 === 'many',
period14: period14,
setPeriod14: (e) => this.setState({ period14: e.target.value }),
custom14: period14 === 'custom',
att14: att14,
toggleAtt14: () => this.setState({ att14: !att14 }),
b15Modes: this.modes([{ id: 'fields', label: '날짜 칸' }, { id: 'picker', label: '날짜 고르는 창' }], m15, (id) => this.setState({ b15: id, period15: null, att15: null })),
b15Title: m15 === 'picker' ? '날짜 고르기 · 날짜 고르는 창' : '날짜 고르기',
pickerOpen: m15 === 'picker',
openPicker: () => this.setState({ b15: 'picker' }),
closePicker: () => this.setState({ b15: 'fields' }),
period15: period15,
setPeriod15: (e) => this.setState({ period15: e.target.value }),
custom15: period15 === 'custom',
att15: att15,
toggleAtt15: () => this.setState({ att15: !att15 }),
calCells: this.calendar(),
b17Modes: this.modes([{ id: 'empty', label: '조건에 맞는 메일 없음' }, { id: 'many', label: '찾을 말이 너무 많음' }], m17, (id) => this.setState({ b17: id })),
b17Title: m17 === 'many' ? '찾을 말이 너무 많음' : '조건에 맞는 메일이 없음',
empty17: m17 !== 'many',
many17: m17 === 'many',
// 낱말 수: 검색 칸 6 + 제목 3 = 9 (8 넘음)
cond17: m17 === 'many' ? '조건: 제목에 ‘계약 갱신 확인’이 든 메일' : '조건: 내가 보낸 메일, 2026. 10. 1.부터 11. 5.까지',
};
}
}
</script>
</body>
</html>
+5 -3
View File
@@ -56,9 +56,10 @@
"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 },
"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 }
"App1SearchStates.dc.html": { "x": 3178, "y": 33450, "w": 2660, "h": 1028, "title": "앱 · 검색 (상태 · 결과에서 연 메일)", "is_interactive": true },
"App1SearchConditions.dc.html": { "x": 5918, "y": 33450, "w": 1784, "h": 1028, "title": "앱 · 검색 2차 (조건으로 찾기)", "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", "App1Search.dc.html", "App1SearchStates.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", "App1SearchConditions.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 },
@@ -74,7 +75,8 @@
"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 },
"app1search": { "x": 0, "y": 33150, "text": "앱 1단계 검색 화면 — 찾기 · 결과 · 강조 · 이어 찾기 · 안내 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 5838 }
"app1search": { "x": 0, "y": 33150, "text": "앱 1단계 검색 화면 — 찾기 · 결과 · 강조 · 이어 찾기 · 안내 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 5838 },
"app1search2": { "x": 5918, "y": 33150, "text": "앱 검색 2차 — 조건으로 찾기 · 날짜 · 조건 줄 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1784 }
},
"designSystems": []
}