:root { --night:#171411; --night-soft:#231f1b; --paper:#f5efe6; --ink:#25201c; --muted:#9b9188; --amber:#d7a574; --line:rgba(37,32,28,.15); }
.install-button { display:block; margin:14px auto 0; border:1px solid rgba(245,239,230,.22); border-radius:999px; background:transparent; color:#cfc4ba; padding:9px 13px; font:inherit; font-size:12px; cursor:pointer; }.install-button:hover { color:#f2c28f; border-color:var(--amber); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -20%,#302923 0,var(--night) 44%); color:var(--paper); font-family:"Noto Sans KR",sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.topbar { height:76px; padding:0 max(24px,calc((100vw - 1000px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(245,239,230,.1); }
.brand { color:var(--paper); text-decoration:none; display:flex; align-items:center; gap:10px; font-size:21px; font-weight:600; letter-spacing:-.04em; }.brand-mark { font-size:21px; color:var(--amber); }
.tabs { display:flex; gap:8px; }.tab { appearance:none; border:0; background:transparent; color:#bfb5ac; padding:10px 14px; border-radius:12px; }.tab:hover,.tab.is-active { color:var(--paper); background:rgba(215,165,116,.11); }.tab.is-active { color:#f2c28f; font-weight:600; }
.shell { width:min(100%,760px); margin:0 auto; padding:74px 28px 100px; }.view { display:none; }.view.is-active { display:block; }
.intro,.archive-heading { margin:0 0 34px; }.eyebrow { color:var(--amber); font-size:11px; letter-spacing:.16em; font-weight:600; margin:0 0 14px; }.intro h1,.archive-heading h1 { margin:0; color:var(--paper); font-family:"Source Serif 4","Noto Sans KR",serif; font-size:clamp(32px,5vw,48px); line-height:1.24; font-weight:400; letter-spacing:-.04em; }.intro p:last-child,.archive-heading p:last-child { color:#bfb6ad; margin:18px 0 0; line-height:1.8; font-size:15px; }
.letter-sheet { min-height:575px; display:flex; flex-direction:column; padding:38px 42px 28px; border-radius:26px; color:var(--ink); background:var(--paper); background-image:radial-gradient(rgba(80,60,40,.07) .5px,transparent .7px); background-size:7px 7px; box-shadow:0 24px 55px rgba(0,0,0,.28); }.sheet-meta { display:flex; justify-content:space-between; color:#877d74; font-size:12px; letter-spacing:.08em; }.field-label { display:block; margin-top:44px; color:#6d625a; font-size:13px; }.body-label { margin-top:28px; }.letter-sheet input,.letter-sheet textarea { width:100%; border:0; outline:0; background:transparent; color:var(--ink); }.letter-sheet input { padding:11px 0 13px; border-bottom:1px solid var(--line); font-family:"Source Serif 4","Noto Sans KR",serif; font-size:30px; letter-spacing:-.04em; }.letter-sheet input::placeholder,.letter-sheet textarea::placeholder { color:#aaa097; }.letter-sheet textarea { flex:1; min-height:220px; padding:11px 0; resize:vertical; font-size:16px; line-height:1.95; }.sheet-footer { display:flex; justify-content:space-between; align-items:end; gap:18px; padding-top:19px; border-top:1px solid var(--line); }.choice-group { display:grid; gap:9px; }.choice-group label { font-size:12px; color:#6b6159; display:flex; align-items:center; gap:7px; }.choice-group input { accent-color:#9a6239; width:14px; height:14px; }.primary-button { border:0; border-radius:999px; background:var(--night); color:var(--paper); padding:14px 21px; white-space:nowrap; font-size:13px; font-weight:600; }.primary-button:hover { background:#392f28; }.privacy-note { text-align:center; color:#91877e; font-size:12px; margin:20px 0 0; }
.archive-heading { margin-bottom:28px; }.archive-tools { display:flex; flex-wrap:wrap; gap:9px; margin:-5px 0 10px; }.tool-button { border:1px solid rgba(245,239,230,.24); border-radius:999px; background:transparent; color:#d6ccc2; padding:9px 13px; font-size:12px; line-height:1.2; cursor:pointer; }.tool-button:hover { border-color:var(--amber); color:#f2c28f; }.archive-note { margin:0 0 24px; color:#91877e; font-size:12px; line-height:1.7; }.letter-list { display:grid; gap:13px; }.letter-card { border:1px solid rgba(245,239,230,.12); background:rgba(245,239,230,.045); border-radius:18px; padding:22px; color:var(--paper); text-align:left; width:100%; transition:transform .18s,background .18s; }.letter-card:hover { transform:translateY(-2px); background:rgba(245,239,230,.075); }.card-top { display:flex; align-items:center; justify-content:space-between; gap:15px; }.card-recipient { font-family:"Source Serif 4","Noto Sans KR",serif; font-size:23px; letter-spacing:-.03em; }.card-date { color:#a99f95; font-size:12px; }.card-preview { overflow:hidden; margin:15px 0 0; color:#c9c0b8; font-size:14px; line-height:1.75; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.empty { padding:58px 25px; text-align:center; border:1px dashed rgba(245,239,230,.2); border-radius:18px; color:#a99f95; line-height:1.8; }.empty strong { display:block; color:var(--paper); font-family:"Source Serif 4","Noto Sans KR",serif; font-size:22px; font-weight:400; margin-bottom:8px; }
.letter-dialog { max-width:620px; width:calc(100% - 32px); max-height:80vh; padding:0; overflow:auto; color:var(--ink); background:var(--paper); border:0; border-radius:23px; box-shadow:0 24px 70px rgba(0,0,0,.45); }.letter-dialog::backdrop { background:rgba(0,0,0,.65); }.dialog-letter { padding:42px; background-image:radial-gradient(rgba(80,60,40,.07) .5px,transparent .7px); background-size:7px 7px; }.dialog-letter h2 { font-family:"Source Serif 4","Noto Sans KR",serif; font-size:34px; font-weight:400; letter-spacing:-.04em; margin:28px 0 14px; }.dialog-meta { color:#837971; font-size:12px; letter-spacing:.08em; }.dialog-body { white-space:pre-wrap; line-height:2; margin:0; font-size:16px; }.dialog-actions { display:flex; gap:10px; margin-top:34px; }.quiet-button { border:1px solid #877b70; background:transparent; color:#564a41; border-radius:999px; padding:10px 15px; font-size:12px; }.quiet-button:hover { background:#ece3d8; }.close-button { position:sticky; z-index:1; top:12px; float:right; margin:12px 14px -48px 0; width:34px; height:34px; border:0; border-radius:50%; background:#ebe2d8; color:#4a4038; font-size:24px; line-height:1; }
#toast { position:fixed; left:50%; bottom:32px; display:flex; align-items:center; gap:12px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#f3eadf; color:#28211c; padding:12px 17px; border-radius:999px; font-size:13px; white-space:nowrap; box-shadow:0 10px 30px rgba(0,0,0,.3); transition:.25s; }#toast.show { opacity:1; pointer-events:auto; transform:translate(-50%,0); }#toast button { border:0; border-radius:999px; background:#332a24; color:#f5efe6; padding:6px 10px; font:inherit; font-size:12px; cursor:pointer; }
@media(max-width:640px){.topbar{height:66px;padding:0 20px}.brand{font-size:18px}.tabs{gap:0}.tab{font-size:12px;padding:8px}.shell{padding:44px 20px 80px}.intro h1,.archive-heading h1{font-size:34px}.letter-sheet{min-height:590px;padding:28px 25px 22px;border-radius:21px}.field-label{margin-top:31px}.letter-sheet input{font-size:25px}.sheet-footer{align-items:start;flex-direction:column}.primary-button{width:100%;padding:15px}.choice-group{grid-template-columns:1fr 1fr;width:100%;gap:8px}.choice-group label{align-items:start}.dialog-letter{padding:30px 24px}.dialog-letter h2{font-size:29px}}