/* ===== 디자인 토큰 (모노톤 미니멀 — 라이트/다크 둘 다 지원) ===== 기본은 시스템 설정(prefers-color-scheme)을 따르고, 설정에서 수동으로 고르면 가 그걸 덮어쓴다. 값 자체는 여기서만 바꾸고 나머지 규칙은 전부 var(--token)으로만 참조한다. */ :root { --bg: #FAFAF8; --surface: #FFFFFF; --surface-2: #F1F0EC; --border: #E4E2DC; --text: #1C1B19; --muted: #83807A; --accent: #3454D1; --accent-ink: #FFFFFF; --danger: #B23B3B; --star: #C08A2E; --radius-sm: 6px; --radius: 10px; --shadow: 0 1px 2px rgba(20, 19, 17, 0.04), 0 4px 14px -8px rgba(20, 19, 17, 0.12); --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif; --font-mono: "SFMono-Regular", ui-monospace, Consolas, "Liberation Mono", Menlo, monospace; } @media (prefers-color-scheme: dark) { :root { --bg: #17181B; --surface: #1F2023; --surface-2: #26272B; --border: #2B2C30; --text: #EDEDEA; --muted: #8D8B85; --accent: #7C93FF; --accent-ink: #14161B; --danger: #E17272; --star: #E0B34D; --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 18px -10px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { --bg: #17181B; --surface: #1F2023; --surface-2: #26272B; --border: #2B2C30; --text: #EDEDEA; --muted: #8D8B85; --accent: #7C93FF; --accent-ink: #14161B; --danger: #E17272; --star: #E0B34D; --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 18px -10px rgba(0, 0, 0, 0.5); } :root[data-theme="light"] { --bg: #FAFAF8; --surface: #FFFFFF; --surface-2: #F1F0EC; --border: #E4E2DC; --text: #1C1B19; --muted: #83807A; --accent: #3454D1; --accent-ink: #FFFFFF; --danger: #B23B3B; --star: #C08A2E; --shadow: 0 1px 2px rgba(20, 19, 17, 0.04), 0 4px 14px -8px rgba(20, 19, 17, 0.12); } * { box-sizing: border-box; } body { font-family: var(--font-body); max-width: 640px; margin: 0 auto; padding: 1.2rem 1rem 2rem; background: var(--bg); color: var(--text); transition: background-color .15s ease, color .15s ease; } h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; } .hidden { display: none !important; } /* ===== 배경사진 레이어 ===== 사진이 없으면 그냥 안 보임(opacity 0). 사진이 있을 때만 body에 has-bg-photo가 붙고, 카드형 표면들이 약간 반투명해지면서 뒤로 사진이 은은하게 비친다. */ #bgPhotoLayer { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: 0; transition: opacity .2s ease; } body.has-bg-photo { background: transparent; } body.has-bg-photo #bgPhotoLayer { opacity: 1; } body.has-bg-photo::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg); opacity: 0.82; } body.has-bg-photo .msg, body.has-bg-photo #drawer, body.has-bg-photo #topbar, body.has-bg-photo form, body.has-bg-photo .settingsPanel, body.has-bg-photo #composeView, body.has-bg-photo #detailView, body.has-bg-photo .pagination { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); } form { display: flex; flex-direction: column; gap: 0.6rem; max-width: 360px; } input, textarea, button, select { font: inherit; font-size: 0.95rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); } input::placeholder, textarea::placeholder { color: var(--muted); } textarea { min-height: 100px; resize: vertical; } #signupMessage { min-height: 3.5rem; } button { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); cursor: pointer; font-weight: 600; transition: opacity .1s ease; } button:hover { opacity: 0.88; } button:disabled { opacity: 0.5; cursor: default; } button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } button.secondary { background: transparent; color: var(--text); border-color: var(--border); } button.danger { background: transparent; color: var(--danger); border-color: var(--border); } .checkboxRow { display: flex; flex-direction: row; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--text); } .fieldHint { font-size: 0.8rem; color: var(--accent); margin-top: -0.4rem; min-height: 1em; font-family: var(--font-mono); } .checkboxRow input { width: auto; padding: 0; } .emailInput { display: flex; align-items: center; gap: 0.4rem; } .emailInput input { flex: 1; min-width: 0; } .domainSuffix { color: var(--muted); font-size: 0.88rem; white-space: nowrap; font-family: var(--font-mono); } .tabs { display: flex; gap: 1.1rem; margin: 1.1rem 0; border-bottom: 1px solid var(--border); } .tabs button { background: none; color: var(--muted); border: none; border-radius: 0; border-bottom: 2px solid transparent; padding: 0.5rem 0.1rem; font-weight: 600; } .tabs button:hover { opacity: 1; background: none; } .tabs button.active { color: var(--text); border-bottom-color: var(--accent); } .bulkToolbar { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.2rem 0.8rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--border); } .bulkToolbar .checkboxRow { margin-right: auto; } .bulkToolbar button { font-size: 0.8rem; padding: 0.35rem 0.65rem; } .selectOneCb { width: auto; padding: 0; margin-left: 0.6rem; flex-shrink: 0; } .msg { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.95rem; margin-bottom: 0.6rem; background: var(--surface); box-shadow: var(--shadow); } .msg .meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.3rem; font-family: var(--font-mono); } .msg .note { font-size: 0.8rem; color: var(--muted); font-style: italic; margin-bottom: 0.3rem; } .msg .subjectRow { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; } .msg .subject { font-weight: 400; flex: 1; } .msg.unread .subject { font-weight: 700; } .msg .body { overflow-wrap: break-word; } .msg .body.expanded { white-space: pre-wrap; } .msg .toggleHint { font-size: 0.8rem; color: var(--accent); margin-top: 0.3rem; } .msg:hover { background: var(--surface-2); } .starBtn { background: none; border: none; color: var(--border); font-size: 1.1rem; padding: 0 0.2rem; cursor: pointer; } .starBtn.on { color: var(--star); } .msgActions { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; } .msgActions button { font-size: 0.8rem; padding: 0.3rem 0.6rem; background: var(--surface-2); color: var(--text); border-color: var(--border); font-weight: 500; } .msgActions button:hover { background: var(--border); opacity: 1; } .attachmentList { margin-top: 0.5rem; font-size: 0.85rem; } .attachmentList a { display: inline-block; margin: 0.2rem 0.3rem 0.2rem 0; padding: 0.25rem 0.6rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--accent); text-decoration: none; font-family: var(--font-mono); font-size: 0.8rem; } .attachmentList a:hover { border-color: var(--accent); } .attachmentRow { margin-bottom: 0.5rem; } .attachmentRow button { font-size: 0.8rem; padding: 0.25rem 0.6rem; margin-left: 0.3rem; } .attachmentPreviewImg { display: block; max-width: 100%; max-height: 60vh; margin-top: 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); } .htmlFrame { width: 100%; height: 70vh; border: none; border-radius: var(--radius-sm); } .searchBar { flex-direction: row; max-width: 100%; margin-bottom: 0.5rem; } .searchInputWrap { position: relative; flex: 1; display: flex; } .searchInputWrap input { flex: 1; padding-right: 2rem; width: 100%; } .clearBtn { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); background: none; color: var(--muted); border: none; border-radius: 50%; width: 1.6rem; height: 1.6rem; padding: 0; font-size: 0.9rem; line-height: 1; } .clearBtn:hover { background: var(--surface-2); color: var(--text); } .dropZone { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 1.2rem; text-align: center; color: var(--muted); font-size: 0.9rem; cursor: pointer; background: var(--surface); } .dropZone.dragover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); } .attachmentChip { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.2rem 0.5rem; margin: 0.3rem 0.3rem 0 0; font-size: 0.82rem; font-family: var(--font-mono); } .attachmentChip button { background: none; border: none; color: var(--danger); padding: 0; font-weight: bold; } .error { color: var(--danger); font-size: 0.9rem; } .notice { color: var(--accent); font-size: 0.9rem; } #topbar { display: flex; align-items: center; gap: 0.6rem; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 0.3rem 0 0.9rem; margin: -1.2rem -1rem 0.6rem; padding-left: 1rem; padding-right: 1rem; padding-top: 1.2rem; border-bottom: 1px solid var(--border); } #topbar h1 { flex: 1 1 auto; min-width: 0; /* flex 아이템이 내용 크기 밑으로 줄어들 수 있게 (ellipsis 적용의 전제조건) */ margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #userInfo { display: block; font-size: 0.82rem; color: var(--muted); overflow-wrap: break-word; margin-bottom: 0.5rem; font-family: var(--font-mono); } .drawerSpacer { flex: 1; } .drawerAccount { padding: 0.8rem 1.2rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; } .drawerAccount button { width: 100%; } .iconBtn { background: none; color: var(--text); border: none; font-size: 1.3rem; padding: 0.2rem 0.5rem; line-height: 1; } .iconBtn:hover { background: var(--surface-2); opacity: 1; } #drawerOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 20; } #drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: var(--surface); box-shadow: var(--shadow); z-index: 21; padding: 1rem 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); } #drawer hr { border: none; border-top: 1px solid var(--border); margin: 0.5rem 0; width: 100%; } .drawerItem { background: none; color: var(--text); border: none; border-radius: 0; text-align: left; padding: 0.65rem 1.2rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; } .drawerItem:hover { background: var(--surface-2); opacity: 1; } .drawerItem.active { color: var(--accent); font-weight: 700; background: var(--surface-2); } .badge { display: inline-block; min-width: 1.2rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--border); color: var(--muted); font-size: 0.72rem; font-weight: 600; text-align: center; font-family: var(--font-mono); margin-left: auto; } .drawerItem[data-tab="inbox"] .badge:not(:empty) { background: var(--accent); color: var(--accent-ink); } #composeFab { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 3.2rem; height: 3.2rem; border-radius: 14px; font-size: 1.3rem; box-shadow: var(--shadow); z-index: 10; } .pagination { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.8rem 0 4.5rem; /* 아래쪽에 여유를 둬서 고정 위치인 메일쓰기 버튼(FAB)과 안 겹치게 함 */ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.8rem; box-shadow: var(--shadow); } .pagination button { font-size: 0.85rem; padding: 0.3rem 0.7rem; } .pagination button:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--border); } #pageInfo { color: var(--text); } .pageJumpInput { width: 3.2rem; padding: 0.3rem 0.4rem; font-size: 0.85rem; text-align: center; } #pageInfo { font-size: 0.85rem; color: var(--muted); font-family: var(--font-mono); } .detailToolbar { display: flex; align-items: center; margin-bottom: 0.5rem; } #detailView .subject { font-weight: 700; font-size: 1.1rem; margin: 0.5rem 0; } #detailView .meta { margin-bottom: 0.3rem; } /* ===== 설정 패널 ===== */ #settingsOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 30; } #confirmPasswordOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 40; } #confirmPasswordModal { z-index: 41; } #confirmPasswordModal .segmentRow { gap: 0.6rem; } .settingsPanel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 2.4rem)); max-height: calc(100vh - 4rem); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem 1.3rem; z-index: 31; display: flex; flex-direction: column; gap: 1.1rem; } .settingsHead { display: flex; align-items: center; justify-content: space-between; } .settingsHead h2 { font-size: 1.05rem; margin: 0; } .settingsSection label.settingsLabel { display: block; font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; } .segmentRow { display: flex; gap: 0.4rem; } .segmentBtn { flex: 1; font-size: 0.85rem; padding: 0.45rem 0.4rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); } .segmentBtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .bgPreviewRow { display: flex; align-items: center; gap: 0.8rem; } .bgPreview { width: 64px; height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2) center/cover no-repeat; flex-shrink: 0; } .bgActions { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .bgActions button { font-size: 0.85rem; padding: 0.4rem 0.6rem; } .settingsHint { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin: 0; } .settingsHint.error { color: var(--danger); } .settingsHint.notice { color: var(--accent); } .settingsHint:empty { display: none; }