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 840 additions and 3 deletions
Showing only changes of commit 5b96ec2e85 - Show all commits
+835
View File
@@ -0,0 +1,835 @@
<!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}
.ara-mask{-webkit-mask:url('/_blob/2b9ef4349333debc969432c859eaf1bf') center/contain no-repeat;mask:url('/_blob/2b9ef4349333debc969432c859eaf1bf') center/contain no-repeat}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
</style>
</helmet>
<div style="width: 2222px; height: 3270px; box-sizing: border-box; padding: 40px; display: flex; flex-direction: column; gap: 56px; 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">
<section aria-labelledby="row1-h" style="display: flex; flex-direction: column; gap: 16px">
<div style="display: flex; align-items: baseline; gap: 16px; min-height: 28px">
<h2 id="row1-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">허락 묻기와 설정</h2>
<p style="margin: 0; font-size: 13.5px; line-height: 20px; color: #4A5363">앱 화면입니다. 받은편지함에서 한 번 권하고, 휴대폰이 묻는 창은 [알림 켜기]를 누를 때만 띄웁니다. 안드로이드 12 이하는 묻지 않고 처음부터 켜져 있습니다.</p>
</div>
<div style="display: flex; gap: 48px; height: 48px">
<div style="flex: 0 0 390px"></div>
<div style="flex: 0 0 390px"></div>
<div role="group" aria-label="고른 뒤 상태 고르기" style="flex: 0 0 390px; display: flex; gap: 8px">
<sc-for list="{{ afterModes }}" as="s" hint-placeholder-count="3">
<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 10px; border: 1px solid {{ s.border }}; border-radius: 10px; background: {{ s.bg }}; color: {{ s.fg }}; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">{{ s.label }}</button>
</sc-for>
</div>
<div style="flex: 0 0 828px"></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">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">1. 받은편지함 · 권하기 줄</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">안드로이드 13 이상에서 아직 묻지 않았을 때만 보입니다. [✕]로 닫으면 다시 보이지 않습니다.</p>
</div>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
<span style="font-size: 12.5px; color: #667085">안 읽은 메일 3통</span>
</div>
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button>
</header>
<section aria-label="새 메일 알림 안내" style="flex: 0 0 auto; display: flex; align-items: flex-start; padding: 4px 4px 4px 16px; border-bottom: 1px solid #E3EEEF; background: #F3F8F8">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; margin-top: 13px; color: #0E7C86"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 0 0 10px">
<p style="margin: 0; font-size: 13px; line-height: 1.55; color: #344054; word-break: keep-all">새 메일 알림을 켜면 앱을 닫아 두어도 새 메일이 오는 대로 알려 드립니다.</p>
<button type="button" style="min-height: 48px; margin: 0 0 0 -12px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">알림 켜기</button>
</div>
<button type="button" aria-label="닫기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #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>
</section>
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0">
<sc-for list="{{ rows }}" as="r" hint-placeholder-count="7">
<li style="border-bottom: 1px solid #F2F4F7; background: #FFFFFF">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<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; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums">{{ r.time }}</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></sc-if>
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></sc-if>
</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
</span>
</div>
</li>
</sc-for>
</ul>
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg><span>메일 쓰기</span></a>
<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="App1MailList.dc.html" 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">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">2. 휴대폰이 묻는 창</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">[알림 켜기]를 누르면 안드로이드가 띄우는 창입니다. 모양과 글은 휴대폰마다 다릅니다.</p>
</div>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
<span style="font-size: 12.5px; color: #667085">안 읽은 메일 3통</span>
</div>
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button>
</header>
<section aria-label="새 메일 알림 안내" style="flex: 0 0 auto; display: flex; align-items: flex-start; padding: 4px 4px 4px 16px; border-bottom: 1px solid #E3EEEF; background: #F3F8F8">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; margin-top: 13px; color: #0E7C86"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 0 0 10px">
<p style="margin: 0; font-size: 13px; line-height: 1.55; color: #344054; word-break: keep-all">새 메일 알림을 켜면 앱을 닫아 두어도 새 메일이 오는 대로 알려 드립니다.</p>
<button type="button" style="min-height: 48px; margin: 0 0 0 -12px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer">알림 켜기</button>
</div>
<button type="button" aria-label="닫기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #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>
</section>
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0">
<sc-for list="{{ rows }}" as="r" hint-placeholder-count="7">
<li style="border-bottom: 1px solid #F2F4F7; background: #FFFFFF">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<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; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums">{{ r.time }}</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></sc-if>
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></sc-if>
</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
</span>
</div>
</li>
</sc-for>
</ul>
<a href="App1Compose.dc.html" style="position: absolute; right: 16px; bottom: 88px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg><span>메일 쓰기</span></a>
<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="App1MailList.dc.html" 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(0, 0, 0, 0.36)"></div>
<div role="dialog" aria-modal="true" aria-labelledby="p2-title" style="position: absolute; left: 24px; right: 24px; top: 262px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 20px 20px; border-radius: 28px; background: #F2F3F5; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28)">
<svg width="28" height="28" viewBox="0 0 24 24" fill="#4A5363" aria-hidden="true"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path></svg>
<h2 id="p2-title" style="margin: 0; padding: 0 8px; font-size: 19px; line-height: 1.45; font-weight: 400; color: #1F1F1F; text-align: center; word-break: keep-all"><b style="font-weight: 700">ARA SYSTEM</b>에서 알림을 보내도록 허용하시겠습니까?</h2>
<div style="align-self: stretch; display: flex; flex-direction: column; gap: 6px; margin-top: 8px">
<button type="button" style="min-height: 52px; border: 0; border-radius: 26px; background: #DEE2E7; color: #1F1F1F; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer">허용</button>
<button type="button" style="min-height: 52px; border: 0; border-radius: 26px; background: #DEE2E7; color: #1F1F1F; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer">허용 안함</button>
</div>
</div>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ afterTitle }}</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">{{ afterNote }}</p>
</div>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<header style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; padding: 0 4px; border-bottom: 1px solid #EEF0F3; background: #FFFFFF">
<button type="button" aria-label="메일함 열기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; line-height: 1.3">
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">받은편지함</h1>
<span style="font-size: 12.5px; color: #667085">안 읽은 메일 3통</span>
</div>
<button type="button" aria-label="메일 찾기" style="flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #344054; cursor: pointer"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button>
</header>
<ul aria-label="받은편지함 메일" style="flex: 1 1 auto; min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0">
<sc-for list="{{ rows }}" as="r" hint-placeholder-count="7">
<li style="border-bottom: 1px solid #F2F4F7; background: #FFFFFF">
<div style="display: flex; align-items: flex-start; gap: 6px; padding: 10px 16px 10px 8px">
<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; font-size: 12.5px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums">{{ r.time }}</span>
</span>
<span style="display: flex; align-items: center; gap: 6px; min-width: 0">
<span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: {{ r.subFw }}; color: {{ r.subColor }}">{{ r.subject }}</span>
<sc-if value="{{ r.att }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></sc-if>
<sc-if value="{{ r.flag }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="중요" width="16" height="16" viewBox="0 0 24 24" fill="#B7791F" stroke="#B7791F" stroke-width="1.6" stroke-linejoin="round" style="flex: 0 0 auto"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></sc-if>
</span>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #667085">{{ r.preview }}</span>
</span>
</div>
</li>
</sc-for>
</ul>
<nav aria-label="앱 메뉴" style="flex: 0 0 auto; display: flex; height: 72px; box-sizing: border-box; padding: 8px 0 10px; border-top: 1px solid #EEF0F3; background: #FFFFFF">
<a href="App1MailList.dc.html" 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 style="position: absolute; left: 12px; right: 12px; bottom: 84px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px">
<a href="App1Compose.dc.html" style="margin-right: 4px; display: inline-flex; align-items: center; gap: 10px; height: 56px; box-sizing: border-box; padding: 0 20px 0 16px; border-radius: 16px; background: #0E7C86; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(11, 54, 64, 0.28)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg><span>메일 쓰기</span></a>
<div role="status" style="align-self: stretch; display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: {{ snackPad }}; border-radius: 10px; background: #0B3640; color: #FFFFFF; font-size: 14.5px; line-height: 1.5; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
<span style="flex: 1 1 auto; min-width: 0; padding: 12px 0; word-break: keep-all">{{ afterText }}</span>
<sc-if value="{{ afterAction }}" hint-placeholder-val="{{ false }}"><button type="button" style="flex: 0 0 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #9ED6DB; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer">설정 열기</button></sc-if>
</div>
</div>
</div>
</div>
<div style="flex: 0 0 828px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">4. 설정 › 새 메일 알림 줄</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">설정 탭의 다른 칸과 로그아웃 확인 창은 App1Shell 그대로입니다. 알림 줄만 상태마다 그렸습니다. 왼쪽은 스위치를 누를 수 있는 상태, 오른쪽은 누를 수 없는 상태입니다.</p>
</div>
<div style="display: flex; gap: 48px; align-items: flex-start">
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 18px">
<sc-for list="{{ notifyLeft }}" as="c" hint-placeholder-count="4">
<div style="display: flex; flex-direction: column; gap: 6px">
<p style="margin: 0; font-size: 13px; line-height: 20px; color: #667085; word-break: keep-all"><b style="font-weight: 700; color: #344054">{{ c.name }}</b> · {{ c.when }}</p>
<div style="border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 4px 12px rgba(16, 24, 28, 0.06)">
<div style="display: flex; align-items: center; gap: 12px; min-height: 68px; box-sizing: border-box; padding: 6px 12px 6px 20px">
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: {{ c.textPad }}">
<span id="{{ c.id }}-label" style="font-size: 15.5px; font-weight: 500; color: #171C26">새 메일 알림</span>
<span id="{{ c.id }}-desc" style="font-size: 13px; line-height: 1.5; color: {{ c.descColor }}; word-break: keep-all">{{ c.desc }}</span>
<sc-if value="{{ c.action }}" hint-placeholder-val="{{ false }}">
<span style="display: flex; margin-top: 2px">
<button type="button" style="display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin-left: -12px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer"><span>설정 열기</span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></button>
</span>
</sc-if>
</div>
<sc-if value="{{ c.busy }}" hint-placeholder-val="{{ false }}">
<span role="status" class="sr">{{ c.busyText }}</span>
<svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke-width="2.6" stroke-linecap="round" style="flex: 0 0 auto"><circle cx="12" cy="12" r="9" stroke="#D5ECEE"></circle><path d="M12 3a9 9 0 0 1 9 9" stroke="#0E7C86"></path></svg>
</sc-if>
<button type="button" role="switch" aria-checked="{{ c.checked }}" aria-disabled="{{ c.disabledStr }}" aria-busy="{{ c.busyStr }}" aria-labelledby="{{ c.id }}-label" aria-describedby="{{ c.id }}-desc" style="flex: 0 0 auto; width: 64px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 24px; background: transparent; cursor: {{ c.cursor }}">
<span aria-hidden="true" style="display: flex; align-items: center; justify-content: {{ c.thumbJustify }}; width: 52px; height: 32px; box-sizing: border-box; padding: 0 2px; border: 2px solid {{ c.trackBorder }}; border-radius: 16px; background: {{ c.trackBg }}">
<span style="display: block; width: {{ c.thumbSize }}; height: {{ c.thumbSize }}; margin: 0 {{ c.thumbGap }}; border-radius: 50%; background: {{ c.thumbBg }}"></span>
</span>
</button>
</div>
</div>
</div>
</sc-for>
<div style="display: flex; flex-direction: column; gap: 6px">
<p style="margin: 0; font-size: 13px; line-height: 20px; color: #667085; word-break: keep-all"><b style="font-weight: 700; color: #344054">설정을 열지 못했을 때</b> · [설정 열기]를 누른 뒤 뜨는 알림</p>
<div role="status" style="margin: 0 12px; display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 12px 16px; border-radius: 10px; background: #0B3640; color: #FFFFFF; font-size: 14.5px; line-height: 1.5; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22); word-break: keep-all">휴대폰 설정을 열지 못했습니다. 휴대폰의 [설정] 앱에서 ARA SYSTEM을 찾아 알림을 켜 주세요.</div>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 18px">
<sc-for list="{{ notifyRight }}" as="c" hint-placeholder-count="4">
<div style="display: flex; flex-direction: column; gap: 6px">
<p style="margin: 0; font-size: 13px; line-height: 20px; color: #667085; word-break: keep-all"><b style="font-weight: 700; color: #344054">{{ c.name }}</b> · {{ c.when }}</p>
<div style="border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 4px 12px rgba(16, 24, 28, 0.06)">
<div style="display: flex; align-items: center; gap: 12px; min-height: 68px; box-sizing: border-box; padding: 6px 12px 6px 20px">
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: {{ c.textPad }}">
<span id="{{ c.id }}-label" style="font-size: 15.5px; font-weight: 500; color: #171C26">새 메일 알림</span>
<span id="{{ c.id }}-desc" style="font-size: 13px; line-height: 1.5; color: {{ c.descColor }}; word-break: keep-all">{{ c.desc }}</span>
<sc-if value="{{ c.action }}" hint-placeholder-val="{{ false }}">
<span style="display: flex; margin-top: 2px">
<button type="button" style="display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin-left: -12px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #0A5F67; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer"><span>설정 열기</span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></button>
</span>
</sc-if>
</div>
<sc-if value="{{ c.busy }}" hint-placeholder-val="{{ false }}">
<span role="status" class="sr">{{ c.busyText }}</span>
<svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke-width="2.6" stroke-linecap="round" style="flex: 0 0 auto"><circle cx="12" cy="12" r="9" stroke="#D5ECEE"></circle><path d="M12 3a9 9 0 0 1 9 9" stroke="#0E7C86"></path></svg>
</sc-if>
<button type="button" role="switch" aria-checked="{{ c.checked }}" aria-disabled="{{ c.disabledStr }}" aria-busy="{{ c.busyStr }}" aria-labelledby="{{ c.id }}-label" aria-describedby="{{ c.id }}-desc" style="flex: 0 0 auto; width: 64px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 24px; background: transparent; cursor: {{ c.cursor }}">
<span aria-hidden="true" style="display: flex; align-items: center; justify-content: {{ c.thumbJustify }}; width: 52px; height: 32px; box-sizing: border-box; padding: 0 2px; border: 2px solid {{ c.trackBorder }}; border-radius: 16px; background: {{ c.trackBg }}">
<span style="display: block; width: {{ c.thumbSize }}; height: {{ c.thumbSize }}; margin: 0 {{ c.thumbGap }}; border-radius: 50%; background: {{ c.thumbBg }}"></span>
</span>
</button>
</div>
</div>
</div>
</sc-for>
</div>
</div>
</div>
</div>
</section>
<section aria-labelledby="row2-h" style="display: flex; flex-direction: column; gap: 16px">
<div style="display: flex; align-items: baseline; gap: 16px; min-height: 28px">
<h2 id="row2-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">휴대폰에 오는 알림</h2>
<p style="margin: 0; font-size: 13.5px; line-height: 20px; color: #4A5363">안드로이드가 그리는 모습입니다(Pixel 같은 휴대폰). 알림 글은 ‘새 메일 N통’뿐이고, 앱을 보고 있을 때는 띄우지 않습니다. 왼쪽 위 단추로 작은 아이콘을 바꿔 볼 수 있습니다.</p>
</div>
<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="{{ iconModes }}" 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 10px; border: 1px solid {{ s.border }}; border-radius: 10px; background: {{ s.bg }}; color: {{ s.fg }}; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">{{ s.label }}</button>
</sc-for>
</div>
<div style="flex: 0 0 390px"></div>
<div style="flex: 0 0 390px"></div>
<div style="flex: 0 0 390px"></div>
<div style="flex: 0 0 390px"></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">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">5. 다른 앱을 쓰는 중</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">화면 위에 잠깐 떴다가 상태 표시줄에 작은 아이콘으로 남습니다. 소리와 진동은 휴대폰 설정을 따릅니다.</p>
</div>
<div role="img" aria-label="다른 앱을 쓰는 중에 화면 위에 뜬 ‘새 메일 3통’ 알림" style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #F4F5F7; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<div aria-hidden="true" style="flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 4px; height: 36px; box-sizing: border-box; padding: 0 20px 0 24px; background: #FFFFFF; color: #1F1F1F; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums">
<span>9:41</span>
<span style="display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; margin-left: 6px"><sc-if value="{{ siAra }}" hint-placeholder-val="{{ true }}"><span class="ara-mask" style="display: block; width: 22px; height: 8px; background: currentColor"></span></sc-if><sc-if value="{{ siEnv }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg></sc-if></span>
<span style="flex: 1 1 auto"></span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 3v18H3z"></path></svg>
<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21 23.5 6.6A18.6 18.6 0 0 0 12 3 18.6 18.6 0 0 0 .5 6.6z"></path></svg>
<svg width="11" height="18" viewBox="0 0 11 18" fill="currentColor" aria-hidden="true"><rect x="3.5" y="0" width="4" height="2" rx="0.6"></rect><rect x="0.5" y="1.6" width="10" height="16" rx="2"></rect></svg>
<span style="position: absolute; left: 50%; top: 11px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #111111"></span>
</div>
<div aria-hidden="true" style="flex: 1 1 auto; display: flex; flex-direction: column">
<div style="display: flex; align-items: center; gap: 16px; height: 64px; box-sizing: border-box; padding: 0 20px; background: #FFFFFF; border-bottom: 1px solid #E4E7EC">
<span style="width: 24px; height: 24px; border-radius: 6px; background: #D0D5DD"></span>
<span style="width: 140px; height: 14px; border-radius: 7px; background: #C5CBD3"></span>
<span style="flex: 1 1 auto"></span>
<span style="width: 32px; height: 32px; border-radius: 50%; background: #D0D5DD"></span>
</div>
<div style="display: flex; flex-direction: column; gap: 14px; padding: 18px 16px">
<span style="display: block; height: 180px; border-radius: 16px; background: #E4E7EC"></span>
<span style="display: flex; align-items: center; gap: 12px"><span style="width: 44px; height: 44px; border-radius: 50%; background: #D0D5DD"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px"><span style="width: 70%; height: 10px; border-radius: 5px; background: #C5CBD3"></span><span style="width: 92%; height: 8px; border-radius: 4px; background: #E4E7EC"></span></span></span>
<span style="display: flex; align-items: center; gap: 12px"><span style="width: 44px; height: 44px; border-radius: 50%; background: #D0D5DD"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px"><span style="width: 55%; height: 10px; border-radius: 5px; background: #C5CBD3"></span><span style="width: 84%; height: 8px; border-radius: 4px; background: #E4E7EC"></span></span></span>
<span style="display: flex; align-items: center; gap: 12px"><span style="width: 44px; height: 44px; border-radius: 50%; background: #D0D5DD"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px"><span style="width: 64%; height: 10px; border-radius: 5px; background: #C5CBD3"></span><span style="width: 88%; height: 8px; border-radius: 4px; background: #E4E7EC"></span></span></span>
<span style="display: block; height: 140px; border-radius: 16px; background: #E4E7EC"></span>
<span style="display: flex; align-items: center; gap: 12px"><span style="width: 44px; height: 44px; border-radius: 50%; background: #D0D5DD"></span><span style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px"><span style="width: 48%; height: 10px; border-radius: 5px; background: #C5CBD3"></span><span style="width: 80%; height: 8px; border-radius: 4px; background: #E4E7EC"></span></span></span>
</div>
</div>
<div aria-hidden="true" style="position: absolute; left: 10px; right: 10px; top: 44px; display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 26px; background: #FFFFFF; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18)">
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><sc-if value="{{ siAra }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="22" height="8" style="display: block; width: 22px; height: auto"></sc-if><sc-if value="{{ siEnv }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg></sc-if></span>
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
<span style="font-size: 12.5px; line-height: 1.4; color: #5F6368">ARA SYSTEM · 지금</span>
<span style="font-size: 15.5px; line-height: 1.4; font-weight: 600; color: #1F1F1F">새 메일 3통</span>
</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#5F6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">6. 알림창</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">새 메일이 더 오면 이 알림의 수만 바뀌고 쌓이지 않습니다. 누르면 메일 탭의 받은편지함이 열립니다.</p>
</div>
<div role="img" aria-label="알림창에 온 ‘새 메일 3통’ 알림" style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #E8EBEE; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<div aria-hidden="true" style="display: flex; flex-direction: column">
<div style="display: flex; align-items: flex-end; gap: 10px; padding: 22px 22px 10px">
<span style="font-size: 30px; line-height: 1; font-weight: 400; color: #1F1F1F; font-variant-numeric: tabular-nums">9:41</span>
<span style="padding-bottom: 2px; font-size: 13.5px; font-weight: 500; color: #44474E">11월 7일 (토)</span>
<span style="flex: 1 1 auto"></span>
<span style="display: inline-flex; align-items: center; gap: 4px; padding-bottom: 3px; color: #1F1F1F"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 3v18H3z"></path></svg><svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21 23.5 6.6A18.6 18.6 0 0 0 12 3 18.6 18.6 0 0 0 .5 6.6z"></path></svg><svg width="11" height="18" viewBox="0 0 11 18" fill="currentColor" aria-hidden="true"><rect x="3.5" y="0" width="4" height="2" rx="0.6"></rect><rect x="0.5" y="1.6" width="10" height="16" rx="2"></rect></svg></span>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 12px 0">
<span style="display: flex; align-items: center; gap: 10px; height: 60px; box-sizing: border-box; padding: 0 14px; border-radius: 22px; background: #C9D6E0; color: #1F1F1F; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21 23.5 6.6A18.6 18.6 0 0 0 12 3 18.6 18.6 0 0 0 .5 6.6z"></path></svg><span>인터넷</span></span>
<span style="display: flex; align-items: center; gap: 10px; height: 60px; box-sizing: border-box; padding: 0 14px; border-radius: 22px; background: #FFFFFF; color: #1F1F1F; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 7 17 17 12 22 12 2 17 7 7 17"></polyline></svg><span>블루투스</span></span>
<span style="display: flex; align-items: center; gap: 10px; height: 60px; box-sizing: border-box; padding: 0 14px; border-radius: 22px; background: #FFFFFF; color: #1F1F1F; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg><span>방해 금지 모드</span></span>
<span style="display: flex; align-items: center; gap: 10px; height: 60px; box-sizing: border-box; padding: 0 14px; border-radius: 22px; background: #FFFFFF; color: #1F1F1F; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6c0 2-2 2-2 4v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10c0-2-2-2-2-4V2h12z"></path><line x1="6" y1="6" x2="18" y2="6"></line></svg><span>손전등</span></span>
</div>
<div style="display: flex; margin: 10px 12px 0; height: 44px; border-radius: 22px; background: #FFFFFF; overflow: hidden"><span style="display: flex; align-items: center; justify-content: flex-end; width: 62%; height: 100%; box-sizing: border-box; padding-right: 13px; border-radius: 22px; background: #C9D6E0; color: #1F1F1F"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg></span></div>
<div style="display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 0">
<div style="display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 22px; background: #FFFFFF">
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><sc-if value="{{ siAra }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="22" height="8" style="display: block; width: 22px; height: auto"></sc-if><sc-if value="{{ siEnv }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg></sc-if></span>
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
<span style="font-size: 12.5px; line-height: 1.4; color: #5F6368">ARA SYSTEM · 지금</span>
<span style="font-size: 15.5px; line-height: 1.4; font-weight: 600; color: #1F1F1F">새 메일 3통</span>
</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#5F6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<div style="display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 22px; background: #FFFFFF">
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #6B7785; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg></span>
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
<span style="font-size: 12.5px; line-height: 1.4; color: #5F6368">날씨 · 8분 전</span>
<span style="font-size: 15.5px; line-height: 1.4; font-weight: 600; color: #1F1F1F">맑음 12°</span>
<span style="font-size: 13.5px; line-height: 1.4; color: #44474E">오늘 최고 15°, 최저 6°</span>
</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#5F6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
</div>
<div style="display: flex; justify-content: space-between; padding: 12px 16px 0">
<span style="height: 36px; padding: 0 16px; border-radius: 18px; background: #FFFFFF; font-size: 13.5px; font-weight: 600; line-height: 36px; color: #1F1F1F">관리</span>
<span style="height: 36px; padding: 0 16px; border-radius: 18px; background: #FFFFFF; font-size: 13.5px; font-weight: 600; line-height: 36px; color: #1F1F1F">모두 지우기</span>
</div>
</div>
<span aria-hidden="true" style="position: absolute; left: 50%; bottom: 16px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: #9AA0A6"></span>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">7. 잠금 화면</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">잠금 화면에도 수만 보입니다. 보낸 사람과 제목은 알림에 싣지 않습니다.</p>
</div>
<div role="img" aria-label="잠금 화면에 온 ‘새 메일 3통’ 알림" style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: linear-gradient(165deg, #22303C 0%, #33475A 55%, #4C6478 100%); box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column; color: #FFFFFF">
<div aria-hidden="true" style="flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 36px; box-sizing: border-box; padding: 0 20px 0 24px">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 3v18H3z"></path></svg>
<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21 23.5 6.6A18.6 18.6 0 0 0 12 3 18.6 18.6 0 0 0 .5 6.6z"></path></svg>
<svg width="11" height="18" viewBox="0 0 11 18" fill="currentColor" aria-hidden="true"><rect x="3.5" y="0" width="4" height="2" rx="0.6"></rect><rect x="0.5" y="1.6" width="10" height="16" rx="2"></rect></svg>
<span style="position: absolute; left: 50%; top: 11px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #0B0B0B"></span>
</div>
<div aria-hidden="true" style="flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding: 60px 12px 0">
<span style="font-size: 92px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums">9:41</span>
<span style="margin-top: 14px; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.92)">11월 7일 토요일</span>
<div style="align-self: stretch; margin-top: 52px; display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 24px; background: rgba(255, 255, 255, 0.9); color: #1F1F1F">
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><sc-if value="{{ siAra }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="22" height="8" style="display: block; width: 22px; height: auto"></sc-if><sc-if value="{{ siEnv }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg></sc-if></span>
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
<span style="font-size: 12.5px; line-height: 1.4; color: #5F6368">ARA SYSTEM · 지금</span>
<span style="font-size: 15.5px; line-height: 1.4; font-weight: 600; color: #1F1F1F">새 메일 3통</span>
</span>
</div>
</div>
<span aria-hidden="true" style="position: absolute; left: 50%; bottom: 112px; margin-left: -12px; display: inline-flex; color: #FFFFFF"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="11" width="16" height="10" rx="2"></rect><path d="M8 11V7a4 4 0 0 1 8 0v4"></path></svg></span>
<span aria-hidden="true" style="position: absolute; left: 28px; bottom: 36px; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #FFFFFF"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6c0 2-2 2-2 4v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10c0-2-2-2-2-4V2h12z"></path><line x1="6" y1="6" x2="18" y2="6"></line></svg></span>
<span aria-hidden="true" style="position: absolute; right: 28px; bottom: 36px; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #FFFFFF"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg></span>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">8. 로그인이 저절로 끝났을 때</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">앱을 14일 동안 열지 않았거나 로그인한 지 30일이 지나면 한 번 옵니다. ‘새 메일 N통’ 자리를 바꿔 씁니다.</p>
</div>
<div role="img" aria-label="로그인이 끝나 새 메일 알림이 멈췄다는 알림" style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #E8EBEE; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<div aria-hidden="true" style="display: flex; flex-direction: column">
<div style="display: flex; align-items: flex-end; gap: 10px; padding: 22px 22px 10px">
<span style="font-size: 30px; line-height: 1; font-weight: 400; color: #1F1F1F; font-variant-numeric: tabular-nums">9:41</span>
<span style="padding-bottom: 2px; font-size: 13.5px; font-weight: 500; color: #44474E">11월 7일 (토)</span>
<span style="flex: 1 1 auto"></span>
<span style="display: inline-flex; align-items: center; gap: 4px; padding-bottom: 3px; color: #1F1F1F"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 3v18H3z"></path></svg><svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21 23.5 6.6A18.6 18.6 0 0 0 12 3 18.6 18.6 0 0 0 .5 6.6z"></path></svg><svg width="11" height="18" viewBox="0 0 11 18" fill="currentColor" aria-hidden="true"><rect x="3.5" y="0" width="4" height="2" rx="0.6"></rect><rect x="0.5" y="1.6" width="10" height="16" rx="2"></rect></svg></span>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 12px 0">
<span style="display: flex; align-items: center; gap: 10px; height: 60px; box-sizing: border-box; padding: 0 14px; border-radius: 22px; background: #C9D6E0; color: #1F1F1F; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21 23.5 6.6A18.6 18.6 0 0 0 12 3 18.6 18.6 0 0 0 .5 6.6z"></path></svg><span>인터넷</span></span>
<span style="display: flex; align-items: center; gap: 10px; height: 60px; box-sizing: border-box; padding: 0 14px; border-radius: 22px; background: #FFFFFF; color: #1F1F1F; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 7 17 17 12 22 12 2 17 7 7 17"></polyline></svg><span>블루투스</span></span>
<span style="display: flex; align-items: center; gap: 10px; height: 60px; box-sizing: border-box; padding: 0 14px; border-radius: 22px; background: #FFFFFF; color: #1F1F1F; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg><span>방해 금지 모드</span></span>
<span style="display: flex; align-items: center; gap: 10px; height: 60px; box-sizing: border-box; padding: 0 14px; border-radius: 22px; background: #FFFFFF; color: #1F1F1F; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6c0 2-2 2-2 4v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10c0-2-2-2-2-4V2h12z"></path><line x1="6" y1="6" x2="18" y2="6"></line></svg><span>손전등</span></span>
</div>
<div style="display: flex; margin: 10px 12px 0; height: 44px; border-radius: 22px; background: #FFFFFF; overflow: hidden"><span style="display: flex; align-items: center; justify-content: flex-end; width: 62%; height: 100%; box-sizing: border-box; padding-right: 13px; border-radius: 22px; background: #C9D6E0; color: #1F1F1F"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg></span></div>
<div style="display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 0">
<div style="display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 16px 14px; border-radius: 22px; background: #FFFFFF">
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><sc-if value="{{ siAra }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="22" height="8" style="display: block; width: 22px; height: auto"></sc-if><sc-if value="{{ siEnv }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg></sc-if></span>
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px">
<span style="display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.4; color: #5F6368"><span style="flex: 1 1 auto">ARA SYSTEM · 지금</span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#5F6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="18 15 12 9 6 15"></polyline></svg></span>
<span style="font-size: 15.5px; line-height: 1.4; font-weight: 600; color: #1F1F1F; word-break: keep-all">새 메일 알림이 멈췄습니다</span>
<span style="font-size: 14px; line-height: 1.5; color: #44474E; word-break: keep-all">안전을 위해 로그아웃했습니다. 앱을 열어 다시 로그인해 주세요.</span>
</span>
</div>
<div style="display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 22px; background: #FFFFFF">
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #6B7785; color: #FFFFFF"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg></span>
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
<span style="font-size: 12.5px; line-height: 1.4; color: #5F6368">날씨 · 8분 전</span>
<span style="font-size: 15.5px; line-height: 1.4; font-weight: 600; color: #1F1F1F">맑음 12°</span>
<span style="font-size: 13.5px; line-height: 1.4; color: #44474E">오늘 최고 15°, 최저 6°</span>
</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#5F6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
</div>
<div style="display: flex; justify-content: space-between; padding: 12px 16px 0">
<span style="height: 36px; padding: 0 16px; border-radius: 18px; background: #FFFFFF; font-size: 13.5px; font-weight: 600; line-height: 36px; color: #1F1F1F">관리</span>
<span style="height: 36px; padding: 0 16px; border-radius: 18px; background: #FFFFFF; font-size: 13.5px; font-weight: 600; line-height: 36px; color: #1F1F1F">모두 지우기</span>
</div>
</div>
<span aria-hidden="true" style="position: absolute; left: 50%; bottom: 16px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: #9AA0A6"></span>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">9. 작은 아이콘 후보</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">상태 표시줄과 알림 앞의 동그라미에 쓰는 아이콘입니다. 휴대폰은 모양만 쓰고 색은 직접 칠합니다.</p>
</div>
<div style="width: 390px; height: 844px; box-sizing: border-box; border-radius: 28px; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); padding: 24px 20px; display: flex; flex-direction: column">
<sc-for list="{{ smallIcons }}" as="k" hint-placeholder-count="2">
<div style="display: flex; flex-direction: column; gap: 14px; padding: {{ k.pad }}; border-bottom: {{ k.sep }}">
<h4 style="margin: 0; font-size: 15.5px; line-height: 22px; font-weight: 700; color: #171C26">{{ k.title }}</h4>
<div style="display: flex; align-items: flex-start; gap: 16px">
<figure style="flex: 0 0 auto; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px">
<span aria-hidden="true" style="display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 12px; background: #1F2933">
<span style="display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; box-sizing: border-box; border: 1px dashed rgba(255, 255, 255, 0.34)"><sc-if value="{{ k.isAra }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="88" height="31" style="display: block; width: 88px; height: auto"></sc-if><sc-if value="{{ k.isEnv }}" hint-placeholder-val="{{ false }}"><svg width="94" height="94" viewBox="0 0 24 24" fill="#FFFFFF" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg></sc-if></span>
</span>
<figcaption style="font-size: 12px; line-height: 1.4; color: #667085; text-align: center">24dp 칸을<br>4배로</figcaption>
</figure>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px">
<span aria-hidden="true" style="display: flex; align-items: center; gap: 4px; height: 32px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; background: #202124; color: #FFFFFF; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums">
<span>9:41</span>
<span style="display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; margin-left: 4px"><sc-if value="{{ k.isAra }}" hint-placeholder-val="{{ true }}"><span class="ara-mask" style="display: block; width: 22px; height: 8px; background: currentColor"></span></sc-if><sc-if value="{{ k.isEnv }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg></sc-if></span>
<span style="display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"></path></svg></span>
<span style="flex: 1 1 auto"></span>
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21 23.5 6.6A18.6 18.6 0 0 0 12 3 18.6 18.6 0 0 0 .5 6.6z"></path></svg>
<svg width="10" height="16" viewBox="0 0 11 18" fill="currentColor" aria-hidden="true"><rect x="3.5" y="0" width="4" height="2" rx="0.6"></rect><rect x="0.5" y="1.6" width="10" height="16" rx="2"></rect></svg>
</span>
<span aria-hidden="true" style="display: flex; align-items: center; gap: 4px; height: 32px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #D0D5DD; color: #1F1F1F; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums">
<span>9:41</span>
<span style="display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; margin-left: 4px"><sc-if value="{{ k.isAra }}" hint-placeholder-val="{{ true }}"><span class="ara-mask" style="display: block; width: 22px; height: 8px; background: currentColor"></span></sc-if><sc-if value="{{ k.isEnv }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg></sc-if></span>
<span style="display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"></path></svg></span>
<span style="flex: 1 1 auto"></span>
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21 23.5 6.6A18.6 18.6 0 0 0 12 3 18.6 18.6 0 0 0 .5 6.6z"></path></svg>
<svg width="10" height="16" viewBox="0 0 11 18" fill="currentColor" aria-hidden="true"><rect x="3.5" y="0" width="4" height="2" rx="0.6"></rect><rect x="0.5" y="1.6" width="10" height="16" rx="2"></rect></svg>
</span>
<span style="font-size: 12px; line-height: 1.4; color: #667085">상태 표시줄, 실제 크기 (옆은 다른 앱 아이콘)</span>
</div>
</div>
<span aria-hidden="true" style="display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: #E8EBEE">
<span style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #FFFFFF">
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0E7C86; color: #FFFFFF"><sc-if value="{{ k.isAra }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="22" height="8" style="display: block; width: 22px; height: auto"></sc-if><sc-if value="{{ k.isEnv }}" hint-placeholder-val="{{ false }}"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg></sc-if></span>
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
<span style="font-size: 12.5px; line-height: 1.4; color: #5F6368">ARA SYSTEM · 지금</span>
<span style="font-size: 15.5px; line-height: 1.4; font-weight: 600; color: #1F1F1F">새 메일 3통</span>
</span>
</span>
</span>
<p style="margin: 0; font-size: 13px; line-height: 1.6; color: #4A5363; word-break: keep-all">{{ k.note }}</p>
</div>
</sc-for>
</div>
</div>
</div>
</section>
<section aria-labelledby="row3-h" style="display: flex; flex-direction: column; gap: 16px">
<div style="display: flex; align-items: baseline; gap: 16px; min-height: 28px">
<h2 id="row3-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">업데이트 화면과 앱 아이콘</h2>
<p style="margin: 0; font-size: 13.5px; line-height: 20px; color: #4A5363">앱 아이콘은 아직 Flutter 기본이라 이번에 함께 정합니다. 삼성 휴대폰은 알림창에도 앱 아이콘을 씁니다.</p>
</div>
<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="{{ updateModes }}" 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 10px; border: 1px solid {{ s.border }}; border-radius: 10px; background: {{ s.bg }}; color: {{ s.fg }}; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">{{ s.label }}</button>
</sc-for>
</div>
<div style="flex: 0 0 1266px"></div>
<div role="group" aria-label="휴대폰 설정 화면 상태 고르기" style="flex: 0 0 390px; display: flex; gap: 8px">
<sc-for list="{{ sysModes }}" 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 10px; 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">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">10. 업데이트 화면</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">최소 버전보다 낮으면 로그인 전이든 메일을 보던 중이든 이 화면으로 옵니다. 뒤로 가기는 앱을 닫습니다.</p>
</div>
<div style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<div style="flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column">
<section aria-label="ARA SYSTEM" style="flex: 0 0 auto; padding: 36px 24px 28px; background: #0B3640">
<img src="/_blob/3a2f4115a8f90207faa7d3a51cd9aec2" alt="ARA SYSTEM" width="150" height="72" style="display: block; width: 150px; height: auto">
</section>
<main style="display: flex; flex-direction: column; gap: 20px; padding: 32px 20px 32px">
<div style="display: flex; flex-direction: column; gap: 10px">
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">앱을 업데이트해 주세요</h1>
<p style="margin: 0; font-size: 15px; line-height: 1.6; color: #4A5363; word-break: keep-all">지금 쓰는 버전으로는 로그인하거나 메일을 볼 수 없습니다. Play 스토어에서 ARA SYSTEM을 업데이트한 뒤 다시 열어 주세요.</p>
</div>
<button type="button" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer"><span>Play 스토어 열기</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></button>
<p style="margin: 0; font-size: 13.5px; color: #667085; font-variant-numeric: tabular-nums">지금 쓰는 버전 1.0.0</p>
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 13.5px; line-height: 1.55; color: #667085; word-break: keep-all">Play 스토어에 업데이트가 보이지 않나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
</main>
</div>
<sc-if value="{{ updateFail }}" hint-placeholder-val="{{ false }}">
<div role="status" style="position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 12px 16px; border-radius: 10px; background: #0B3640; color: #FFFFFF; font-size: 14.5px; line-height: 1.5; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22); word-break: keep-all">Play 스토어를 열지 못했습니다. Play 스토어 앱을 직접 열어 ARA SYSTEM을 찾아 업데이트해 주세요.</div>
</sc-if>
</div>
</div>
<div style="flex: 0 0 1266px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">11. 앱 아이콘 후보</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">안드로이드 적응형 아이콘입니다. 휴대폰마다 동그라미나 둥근 네모로 잘라 씁니다. 마크는 잘리지 않는 가운데 칸 안에 둡니다.</p>
</div>
<div style="width: 1266px; box-sizing: border-box; border-radius: 28px; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 24px">
<div style="display: flex; gap: 32px">
<sc-for list="{{ appIcons }}" as="a" hint-placeholder-count="3">
<div style="flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 20px; box-shadow: {{ a.frame }}; background: {{ a.panelBg }}">
<div style="display: flex; flex-direction: column; gap: 2px">
<h4 style="margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: #171C26">{{ a.title }}</h4>
<p style="margin: 0; font-size: 13px; line-height: 20px; color: #667085">{{ a.sub }}</p>
</div>
<div style="display: flex; align-items: flex-start; gap: 28px">
<figure style="margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px">
<span aria-hidden="true" style="display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: {{ a.bg }}; box-shadow: {{ a.ring }}"><sc-if value="{{ a.white }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="62" height="22" style="display: block; width: 62px; height: auto"></sc-if><sc-if value="{{ a.teal }}" hint-placeholder-val="{{ false }}"><span class="ara-mask" style="display: block; width: 62px; height: 22px; background: #0E7C86"></span></sc-if></span>
<figcaption style="font-size: 12px; color: #667085">동그라미 (Pixel 등)</figcaption>
</figure>
<figure style="margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px">
<span aria-hidden="true" style="display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 30%; background: {{ a.bg }}; box-shadow: {{ a.ring }}"><sc-if value="{{ a.white }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="62" height="22" style="display: block; width: 62px; height: auto"></sc-if><sc-if value="{{ a.teal }}" hint-placeholder-val="{{ false }}"><span class="ara-mask" style="display: block; width: 62px; height: 22px; background: #0E7C86"></span></sc-if></span>
<figcaption style="font-size: 12px; color: #667085">둥근 네모 (삼성 등)</figcaption>
</figure>
</div>
<div style="display: flex; flex-direction: column; gap: 6px">
<div aria-hidden="true" style="display: flex; height: 150px; border-radius: 16px; overflow: hidden">
<div style="flex: 1 1 0; display: flex; justify-content: space-evenly; align-items: center; background: linear-gradient(160deg, #EEF3F7 0%, #D3DFE8 100%)">
<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px">
<span style="display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: {{ a.bg }}; box-shadow: {{ a.homeShadow }}"><sc-if value="{{ a.white }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="36" height="13" style="display: block; width: 36px; height: auto"></sc-if><sc-if value="{{ a.teal }}" hint-placeholder-val="{{ false }}"><span class="ara-mask" style="display: block; width: 36px; height: 13px; background: #0E7C86"></span></sc-if></span>
<span style="font-size: 12px; line-height: 1.3; color: #1F1F1F; white-space: nowrap">ARA SYSTEM</span>
</span>
<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px">
<span style="display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #3D7BE0; color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22)"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"></path></svg></span>
<span style="font-size: 12px; line-height: 1.3; color: #1F1F1F; white-space: nowrap">메시지</span>
</span>
</div>
<div style="flex: 1 1 0; display: flex; justify-content: space-evenly; align-items: center; background: linear-gradient(160deg, #263241 0%, #141B24 100%)">
<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px">
<span style="display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 30%; background: {{ a.bg }}; box-shadow: {{ a.homeShadow }}"><sc-if value="{{ a.white }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="36" height="13" style="display: block; width: 36px; height: auto"></sc-if><sc-if value="{{ a.teal }}" hint-placeholder-val="{{ false }}"><span class="ara-mask" style="display: block; width: 36px; height: 13px; background: #0E7C86"></span></sc-if></span>
<span style="font-size: 12px; line-height: 1.3; color: #FFFFFF; white-space: nowrap">ARA SYSTEM</span>
</span>
<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px">
<span style="display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 30%; background: #4B5563; color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22)"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg></span>
<span style="font-size: 12px; line-height: 1.3; color: #FFFFFF; white-space: nowrap">카메라</span>
</span>
</div>
</div>
<span style="font-size: 12px; line-height: 1.4; color: #667085">홈 화면 · 밝은 바탕화면과 어두운 바탕화면</span>
</div>
<div style="display: flex; flex-direction: column; gap: 6px">
<span aria-hidden="true" style="display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: #EEF0F2">
<span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 30%; background: {{ a.bg }}; box-shadow: {{ a.ring }}"><sc-if value="{{ a.white }}" hint-placeholder-val="{{ true }}"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="24" height="9" style="display: block; width: 24px; height: auto"></sc-if><sc-if value="{{ a.teal }}" hint-placeholder-val="{{ false }}"><span class="ara-mask" style="display: block; width: 24px; height: 9px; background: #0E7C86"></span></sc-if></span>
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
<span style="font-size: 12.5px; line-height: 1.4; color: #5F6368">ARA SYSTEM · 지금</span>
<span style="font-size: 15px; line-height: 1.4; font-weight: 600; color: #1F1F1F">새 메일 3통</span>
</span>
</span>
<span style="font-size: 12px; line-height: 1.4; color: #667085">삼성 휴대폰 알림창 (실기기에서 확인)</span>
</div>
<p style="margin: 0; font-size: 13px; line-height: 1.6; color: #4A5363; word-break: keep-all">{{ a.note }}</p>
</div>
</sc-for>
</div>
<div style="display: flex; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid #EEF0F3">
<span aria-hidden="true" style="flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #D7E3EA"><span class="ara-mask" style="display: block; width: 36px; height: 13px; background: #2F4A5A"></span></span>
<p style="margin: 0; font-size: 13.5px; line-height: 1.6; color: #4A5363; word-break: keep-all">안드로이드 13 이상에서 휴대폰의 테마 아이콘을 켜면 셋 모두 바탕을 버리고 마크만 휴대폰 색으로 칠합니다. 그래서 마크만 담은 그림을 한 장 더 넣습니다.</p>
</div>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">12. [설정 열기]가 여는 휴대폰 설정</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">안드로이드가 그려 모양은 휴대폰마다 다릅니다. ‘새 메일’이라는 이름과 설명만 앱이 정합니다.</p>
</div>
<div role="img" aria-label="휴대폰 설정의 ARA SYSTEM 알림 화면" style="position: relative; width: 390px; height: 844px; border-radius: 28px; overflow: hidden; background: #F6F7F9; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<div aria-hidden="true" style="flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 4px; height: 36px; box-sizing: border-box; padding: 0 20px 0 24px; color: #1F1F1F; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums">
<span>9:41</span>
<span style="flex: 1 1 auto"></span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 3v18H3z"></path></svg>
<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21 23.5 6.6A18.6 18.6 0 0 0 12 3 18.6 18.6 0 0 0 .5 6.6z"></path></svg>
<svg width="11" height="18" viewBox="0 0 11 18" fill="currentColor" aria-hidden="true"><rect x="3.5" y="0" width="4" height="2" rx="0.6"></rect><rect x="0.5" y="1.6" width="10" height="16" rx="2"></rect></svg>
<span style="position: absolute; left: 50%; top: 11px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #111111"></span>
</div>
<div aria-hidden="true" style="flex: 1 1 auto; display: flex; flex-direction: column">
<div style="display: flex; align-items: center; height: 56px; padding: 0 16px; color: #1F1F1F"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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></div>
<div style="padding: 20px 24px 18px; font-size: 32px; line-height: 1.2; font-weight: 400; color: #1F1F1F">알림</div>
<div style="display: flex; align-items: center; gap: 14px; padding: 0 24px 22px">
<span style="display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #0B3640"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="28" height="10" style="display: block; width: 28px; height: auto"></span>
<span style="font-size: 17px; font-weight: 500; color: #1F1F1F">ARA SYSTEM</span>
</div>
<div style="display: flex; align-items: center; gap: 12px; margin: 0 16px; padding: 18px 14px 18px 22px; border-radius: 28px; background: #DCE5EC">
<span style="flex: 1 1 auto; min-width: 0; font-size: 16.5px; font-weight: 500; color: #1F1F1F">모든 ‘ARA SYSTEM’ 알림</span>
<sc-for list="{{ sysMainSw }}" as="w" hint-placeholder-count="1"><span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: {{ w.thumbJustify }}; width: 52px; height: 32px; box-sizing: border-box; padding: 0 2px; border: 2px solid {{ w.trackBorder }}; border-radius: 16px; background: {{ w.trackBg }}"><span style="display: block; width: {{ w.thumbSize }}; height: {{ w.thumbSize }}; margin: 0 {{ w.thumbGap }}; border-radius: 50%; background: {{ w.thumbBg }}"></span></span></sc-for>
</div>
<div style="padding: 26px 24px 6px; font-size: 13.5px; font-weight: 600; color: #3E5F76">알림 카테고리</div>
<div style="display: flex; align-items: center; gap: 16px; padding: 14px 30px 14px 24px">
<span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px">
<span style="font-size: 16.5px; color: {{ sysChanColor }}">새 메일</span>
<span style="font-size: 14px; line-height: 1.45; color: {{ sysChanSubColor }}">새 메일이 오면 알려 드립니다.</span>
</span>
<span style="flex: 0 0 auto; width: 1px; height: 32px; background: #C4C7CC"></span>
<sc-for list="{{ sysChanSw }}" as="w" hint-placeholder-count="1"><span style="flex: 0 0 auto; display: flex; align-items: center; justify-content: {{ w.thumbJustify }}; width: 52px; height: 32px; box-sizing: border-box; padding: 0 2px; border: 2px solid {{ w.trackBorder }}; border-radius: 16px; background: {{ w.trackBg }}"><span style="display: block; width: {{ w.thumbSize }}; height: {{ w.thumbSize }}; margin: 0 {{ w.thumbGap }}; border-radius: 50%; background: {{ w.thumbBg }}"></span></span></sc-for>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":2222,"height":3270}}'>
class Component extends DCLogic {
state = { after: null, icon: null, update: null, sys: null };
// 받은편지함 예시 메일 — App1MailList 의 같은 메일
mails() {
return [
{ who: '이도윤', initial: '이', time: '오전 10:42', subject: 'Re: 유지보수 계약 갱신 건', preview: '말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다. 기간은 1년이고, 단가는 작년과 같습니다.', unread: true, att: true },
{ who: '인사팀', initial: '인', time: '오전 9:05', subject: '[공지] 계약직 채용 일정 안내', preview: '11월 채용 일정을 알려 드립니다. 서류 접수는 11월 14일(금)까지입니다.', unread: true },
{ who: '박준호', initial: '박', time: '오전 8:31', subject: '11월 인프라 점검 일정 조율', preview: '점검 시간은 토요일 오전 2시부터 4시까지로 잡으려고 합니다. 괜찮은지 확인 부탁드립니다.', unread: true, flag: true },
{ who: '한빛파트너스 고객지원', initial: '한', time: '어제', subject: '11월 정기 점검 일정 안내', preview: '안녕하세요, 한빛파트너스 고객지원팀입니다. 11월 정기 점검 일정을 안내해 드립니다.', att: true },
{ who: '최서연', initial: '최', time: '11월 3일', subject: '11월 비용 정산 안내', preview: '10월 사용분 영수증을 11월 10일까지 올려 주세요.', att: true },
{ who: '정하늘', initial: '정', time: '11월 2일', subject: '신규 입사자 교육 회의록', preview: '지난 회의에서 정한 교육 일정과 담당자를 정리했습니다.' },
{ who: '김민수', initial: '김', time: '10월 30일', subject: '회의실 예약 변경', preview: '목요일 회의를 3층 큰 회의실로 옮겼습니다.' },
];
}
// 목록 줄 하나 — 목록 보드의 줄 그대로(뒤 화면이라 누르지 않는다)
row(m) {
const unread = !!m.unread;
return {
who: m.who,
initial: m.initial,
time: m.time,
subject: m.subject,
preview: m.preview,
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',
};
}
// 상태 고르기 단추 — 다른 앱 보드와 같은 모양
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',
};
});
}
// 앱의 스위치 — App1Shell 과 같은 값. 누를 수 없으면 옅게
appSwitch(on, disabled) {
if (disabled) return { trackBg: '#F2F4F7', trackBorder: '#D0D5DD', thumbBg: '#C5CBD3', thumbSize: '16px', thumbGap: '4px', thumbJustify: 'flex-start' };
if (on) return { trackBg: '#0E7C86', trackBorder: '#0E7C86', thumbBg: '#FFFFFF', thumbSize: '24px', thumbGap: '0', thumbJustify: 'flex-end' };
return { trackBg: '#FFFFFF', trackBorder: '#8A94A3', thumbBg: '#8A94A3', thumbSize: '16px', thumbGap: '4px', thumbJustify: 'flex-start' };
}
// 휴대폰 설정 화면의 스위치 — 안드로이드가 그리는 회청색(반복 하나짜리 목록으로 넘긴다)
sysSwitch(on, disabled) {
if (disabled) return [{ trackBg: '#E6E8EB', trackBorder: '#C4C7CC', thumbBg: '#C4C7CC', thumbSize: '16px', thumbGap: '4px', thumbJustify: 'flex-start' }];
if (on) return [{ trackBg: '#3E5F76', trackBorder: '#3E5F76', thumbBg: '#FFFFFF', thumbSize: '24px', thumbGap: '0', thumbJustify: 'flex-end' }];
return [{ trackBg: '#E1E5EA', trackBorder: '#74777F', thumbBg: '#74777F', thumbSize: '16px', thumbGap: '4px', thumbJustify: 'flex-start' }];
}
// 설정 › 새 메일 알림 줄의 상태 여덟 — 왼쪽은 스위치를 누를 수 있는 상태, 오른쪽은 누를 수 없는 상태
notifyRows() {
const BASE = '새 메일이 오면 휴대폰 알림으로 알려 드립니다.';
const list = [
{ id: 'n1', side: 'left', name: '켜짐', when: '처음 값', desc: BASE, on: true },
{ id: 'n2', side: 'left', name: '꺼짐', when: '스위치를 껐을 때', desc: BASE, on: false },
{ id: 'n3', side: 'left', name: '허락 전', when: '안드로이드 13 이상에서 아직 허용하지 않았을 때', desc: '켜면 휴대폰이 알림을 허용할지 묻습니다. 그때 [허용]을 눌러 주세요.', on: false },
{ id: 'n8', side: 'left', name: '켜는 중 · 끄는 중', when: '스위치는 바꿀 값으로 옮기고 끝날 때까지 기다립니다', desc: BASE, on: true, busy: true },
{ id: 'n4', side: 'right', name: '휴대폰에서 막힘', when: '두 번 거절했거나 휴대폰 설정에서 앱 알림을 껐을 때', desc: '휴대폰 설정에서 이 앱의 알림이 꺼져 있습니다. [설정 열기]를 눌러 알림을 켜 주세요.', disabled: true, action: true },
{ id: 'n5', side: 'right', name: '새 메일 알림만 꺼짐', when: '휴대폰 설정에서 ‘새 메일’ 카테고리만 껐을 때', desc: '휴대폰 설정에서 새 메일 알림이 꺼져 있습니다. [설정 열기]를 눌러 켜 주세요.', disabled: true, action: true },
{ id: 'n6', side: 'right', name: '지금 쓸 수 없음', when: '회사 서버가 알림을 보낼 수 없을 때', desc: '지금은 새 메일 알림을 쓸 수 없습니다. 새 메일은 앱을 열어 확인해 주세요.', disabled: true },
{ id: 'n7', side: 'right', name: '이 휴대폰에서 받을 수 없음', when: 'Google Play 서비스가 없는 휴대폰 등', desc: '이 휴대폰에서는 새 메일 알림을 받을 수 없습니다. 새 메일은 앱을 열어 확인해 주세요.', disabled: true },
];
return list.map((x) => {
const disabled = !!x.disabled;
return Object.assign({
id: x.id,
side: x.side,
name: x.name,
when: x.when,
desc: x.desc,
descColor: disabled ? '#4A5363' : '#667085',
action: !!x.action,
busy: !!x.busy,
busyText: '켜는 중',
checked: x.on ? 'true' : 'false',
disabledStr: disabled ? 'true' : 'false',
busyStr: x.busy ? 'true' : 'false',
cursor: disabled ? 'default' : 'pointer',
textPad: x.action ? '8px 0 0' : '0',
}, this.appSwitch(!!x.on, disabled));
});
}
// 작은 아이콘 후보 둘
smallIcons() {
return [
{ title: 'ARA 글자 마크 (추천)', isAra: true, isEnv: false, pad: '0 0 22px', sep: '1px solid #EEF0F3', note: '웹의 바탕화면 알림, 탭 아이콘과 같은 마크라 어느 앱의 알림인지 바로 압니다. 가로로 길어 상태 표시줄에서는 가늘게 보이고, 해상도가 낮은 휴대폰에서는 획을 한 겹 굵게 만듭니다.' },
{ title: '편지 봉투', isAra: false, isEnv: true, pad: '22px 0 0', sep: '0', note: '작게 보여도 또렷하지만 다른 메일 앱과 모양이 같아 어느 앱의 알림인지 알기 어렵습니다.' },
];
}
// 앱 아이콘 후보 셋 — 추천(나)은 청록 테두리로 묶는다
appIcons() {
const shadow = '0 1px 3px rgba(0, 0, 0, 0.22)';
return [
{ title: '가. 청록 바탕', sub: '#0E7C86 바탕에 흰 마크', bg: '#0E7C86', ring: 'none', homeShadow: shadow, white: true, teal: false, frame: 'inset 0 0 0 1px #EEF0F3', panelBg: '#FFFFFF', note: '브랜드 강조색이라 홈 화면에서 눈에 잘 띕니다. 웹의 탭 아이콘과 홈 화면 아이콘(남색)과는 색이 다릅니다.' },
{ title: '나. 남색 바탕 (추천)', sub: '#0B3640 바탕에 흰 마크', bg: '#0B3640', ring: 'none', homeShadow: shadow, white: true, teal: false, frame: 'inset 0 0 0 2px #0E7C86', panelBg: '#F3F8F8', note: '웹의 탭 아이콘, 홈 화면 아이콘, 바탕화면 알림과 같은 모양이라 같은 서비스로 바로 알아봅니다. 어두운 바탕화면에서도 흰 마크가 또렷합니다.' },
{ title: '다. 흰 바탕', sub: '흰 바탕에 #0E7C86 마크', bg: '#FFFFFF', ring: 'inset 0 0 0 1px #D0D5DD', homeShadow: 'inset 0 0 0 1px #D0D5DD, ' + shadow, white: false, teal: true, frame: 'inset 0 0 0 1px #EEF0F3', panelBg: '#FFFFFF', note: '깔끔하지만 밝은 바탕화면에서는 테두리가 흐려지고, 흰 아이콘이 많은 홈 화면에서 묻히기 쉽습니다.' },
];
}
renderVals() {
const st = this.state;
const after = st.after ?? 'allow';
const icon = st.icon ?? 'ara';
const update = st.update ?? 'first';
const sys = st.sys ?? 'channel';
// 3. 고른 뒤 — 허용 · 허용 안함 · 창이 뜨지 않을 만큼 이미 막혀 있을 때
const AFTER = {
allow: { title: '3. [허용]을 누른 뒤', note: '권하기 줄이 사라지고 새 메일 알림이 켜집니다.', text: '새 메일 알림을 켰습니다.', action: false },
deny: { title: '3. [허용 안함]을 누른 뒤', note: '권하기 줄이 사라집니다. [설정] 탭의 스위치를 켜면 한 번 더 묻습니다.', text: '나중에 [설정] 탭에서 새 메일 알림을 켤 수 있습니다.', action: false },
blocked: { title: '3. 이미 막혀 있을 때', note: '휴대폰이 묻는 창이 뜨지 않으면 이 알림만 뜨고 권하기 줄이 사라집니다.', text: '휴대폰 설정에서 이 앱의 알림이 꺼져 있습니다.', action: true },
};
const A = AFTER[after];
const notify = this.notifyRows();
const appOff = sys === 'app';
return {
rows: this.mails().map((m) => this.row(m)),
afterModes: this.modes([{ id: 'allow', label: '허용' }, { id: 'deny', label: '허용 안함' }, { id: 'blocked', label: '이미 막힘' }], after, (id) => this.setState({ after: id })),
afterTitle: A.title,
afterNote: A.note,
afterText: A.text,
afterAction: A.action,
snackPad: A.action ? '0 4px 0 16px' : '0 16px',
notifyLeft: notify.filter((x) => x.side === 'left'),
notifyRight: notify.filter((x) => x.side === 'right'),
iconModes: this.modes([{ id: 'ara', label: 'ARA 마크 (추천)' }, { id: 'env', label: '편지 봉투' }], icon, (id) => this.setState({ icon: id })),
siAra: icon === 'ara',
siEnv: icon === 'env',
smallIcons: this.smallIcons(),
updateModes: this.modes([{ id: 'first', label: '처음' }, { id: 'fail', label: '열지 못했을 때' }], update, (id) => this.setState({ update: id })),
updateFail: update === 'fail',
appIcons: this.appIcons(),
sysModes: this.modes([{ id: 'channel', label: '새 메일만 꺼짐' }, { id: 'app', label: '앱 알림 모두 꺼짐' }], sys, (id) => this.setState({ sys: id })),
sysMainSw: this.sysSwitch(!appOff, false),
sysChanSw: this.sysSwitch(false, appOff),
sysChanColor: appOff ? '#9AA0A6' : '#1F1F1F',
sysChanSubColor: appOff ? '#B0B4BA' : '#44474E',
};
}
}
</script>
</body>
</html>
+5 -3
View File
@@ -57,9 +57,10 @@
"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 },
"App1SearchConditions.dc.html": { "x": 5918, "y": 33450, "w": 1784, "h": 1028, "title": "앱 · 검색 2차 (조건으로 찾기)", "is_interactive": true }
"App1SearchConditions.dc.html": { "x": 5918, "y": 33450, "w": 1784, "h": 1028, "title": "앱 · 검색 2차 (조건으로 찾기)", "is_interactive": true },
"App1Push.dc.html": { "x": 0, "y": 34900, "w": 2222, "h": 3270, "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", "App1Search.dc.html", "App1SearchStates.dc.html", "App1SearchConditions.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", "App1Push.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 },
@@ -76,7 +77,8 @@
"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 },
"app1search2": { "x": 5918, "y": 33150, "text": "앱 검색 2차 — 조건으로 찾기 · 날짜 · 조건 줄 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1784 }
"app1search2": { "x": 5918, "y": 33150, "text": "앱 검색 2차 — 조건으로 찾기 · 날짜 · 조건 줄 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1784 },
"app1push": { "x": 0, "y": 34600, "text": "앱 새 메일 알림 — 허락 묻기 · 설정 · 휴대폰 알림 · 업데이트 · 앱 아이콘 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 2222 }
},
"designSystems": []
}