:root { --blue:#007aff; --ink:#111114; --muted:#6d6d72; --group:#f2f2f7; --line:#c6c6c8; --card:#fff; --red:#ff3b30; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--group); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; } button,input,textarea { font:inherit; }
.shell { width:min(100%,720px); min-height:100vh; margin:auto; padding:calc(22px + env(safe-area-inset-top)) 16px calc(36px + env(safe-area-inset-bottom)); background:#fff; }.app-header { display:flex; justify-content:space-between; align-items:center; margin:5px 4px 25px; }.eyebrow { margin:0 0 2px; font-size:13px; color:var(--muted); } h1 { margin:0; font-size:34px; letter-spacing:-1.35px; } h2 { margin:0; font-size:20px; letter-spacing:-.35px; }
.account-button,.secondary { background:none; border:0; color:var(--blue); font-weight:500; cursor:pointer; }.account-button { font-size:16px; }.auth-card,.composer { padding:18px 16px; border-radius:12px; background:var(--group); }.auth-card p { color:var(--muted); line-height:1.45; margin:8px 0 16px; font-size:14px; }.auth-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }.auth-message { min-height:20px; margin-bottom:0 !important; color:var(--red) !important; }
label { display:block; margin:14px 0 7px; font-size:13px; color:var(--muted); } label span { color:var(--muted); } input[type=text],input[type=email],input[type=password],textarea { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; color:var(--ink); background:var(--card); outline:none; } textarea { resize:vertical; line-height:1.5; } input:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #007aff22; }
.composer h2 { margin-bottom:4px; }.composer-bottom { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:12px; }.file-picker,.record-actions button { cursor:pointer; border:0; background:transparent; color:var(--blue); padding:7px 0; margin:0; }.file-picker span { font-size:20px; vertical-align:-1px; color:var(--blue); }.primary { border:0; border-radius:9px; background:var(--blue); color:white; padding:10px 15px; font-weight:650; cursor:pointer; }.primary:active { opacity:.75; }
.pending-files,.attachments { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }.file-chip { display:inline-flex; gap:6px; align-items:center; padding:6px 9px; border-radius:8px; background:#fff; border:1px solid var(--line); font-size:12px; color:var(--muted); }.file-chip button { border:0; background:none; color:var(--muted); cursor:pointer; font-size:16px; line-height:1; }.file-thumb { width:38px; height:38px; border-radius:6px; object-fit:cover; vertical-align:middle; }
.records { margin-top:31px; }.section-head { display:flex; justify-content:space-between; align-items:center; margin:0 4px 10px; }.section-head span { color:var(--muted); font-size:13px; }.empty-state { padding:34px 15px; border-radius:12px; text-align:center; color:var(--muted); background:var(--group); line-height:1.6; }.record-list { display:grid; gap:10px; }.record { padding:16px; background:var(--group); border-radius:12px; }.record-meta { font-size:12px; color:var(--muted); }.record h3 { margin:7px 0; font-size:17px; }.record-content { margin:0; line-height:1.55; white-space:pre-wrap; word-break:break-word; }.attachments a { color:var(--blue); text-decoration:none; }.record-actions { display:flex; justify-content:flex-end; gap:18px; margin-top:7px; }.record-actions .delete { color:var(--red); } #toast { position:fixed; z-index:2; left:50%; bottom:calc(25px + env(safe-area-inset-bottom)); transform:translate(-50%,90px); background:#252529; color:white; padding:10px 15px; border-radius:99px; font-size:14px; opacity:0; transition:.25s; } #toast.show { transform:translate(-50%,0); opacity:1; }