:root{--text:#4a4a4a;--sub:#8a8a8a;--bg:#f6f3ee;--card:#fff;--line:#e6e1d8;--accent:#f2a65a;--line-green:#06c755}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg)}
body{font-family:"BIZ UDPGothic","Hiragino Sans",sans-serif;color:var(--text);line-height:1.5}
.app{max-width:480px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(32px,env(safe-area-inset-bottom))}
h1{font-size:20px;margin:4px 0 0;text-align:center;letter-spacing:.05em}
h2{font-size:14px;margin:0 0 10px;color:var(--sub)}
button{font:inherit;color:var(--text)}
[hidden]{display:none!important}

.tabs{display:flex;gap:8px;margin:14px 0 10px;overflow-x:auto}
.tab{flex:1 0 auto;min-width:72px;padding:8px 14px;border-radius:999px;border:2px solid var(--line);background:#fff;cursor:pointer;white-space:nowrap}
.tab.on{background:var(--text);color:#fff;border-color:var(--text)}
.tab.add{flex:0 0 auto;min-width:44px}

.datebar{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px}
.datebar>div{font-size:17px;font-weight:700;text-align:center;flex:1}
.arrow{width:44px;height:44px;border-radius:50%;border:none;background:#fff;font-size:24px;cursor:pointer}
.arrow:disabled{opacity:.3}

.sec{background:var(--card);border-radius:20px;padding:14px;margin-bottom:12px}
.colors{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 4px}
.c{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;cursor:pointer;background:none;border:none;padding:0}
.dot{width:48px;height:48px;border-radius:50%;border:2px solid rgba(0,0,0,.08);transition:transform .15s}
.c.on .dot{outline:3px solid var(--text);outline-offset:3px;transform:scale(1.05)}
.faces{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.f{display:flex;justify-content:center;cursor:pointer;padding:6px 0;border-radius:14px;background:none;border:none}
.f.on{background:#f1ede6;outline:3px solid var(--text);outline-offset:-3px}
.f svg{width:56px;height:56px}

.today{background:#fff;border-radius:24px;border:2px solid var(--line);min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-bottom:12px;padding:12px}
.today svg{width:140px;height:140px}
.today p{margin:0;font-weight:700}
.today .hint{color:var(--sub);font-weight:400}

textarea{width:100%;min-height:84px;border:2px solid var(--line);border-radius:14px;padding:10px;font:inherit;font-size:16px;color:var(--text);resize:vertical;background:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 16px;border:2px solid var(--line);border-radius:16px;background:#fff;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;color:var(--text)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.wide{width:100%;margin-bottom:12px}
.btn.small{padding:9px 12px;font-size:14px;border-radius:12px;flex:1}
.row{display:flex;gap:8px}

.entry{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.entry:first-child{border-top:none}
.entry svg{width:56px;height:56px;flex-shrink:0}
.entry .body{flex:1;min-width:0;font-size:13px}
.entry .body b{font-size:14px}
.entry .memo{color:var(--sub);white-space:pre-wrap;word-break:break-all}
.entry .ops{display:flex;flex-direction:column;gap:4px}
.entry .ops button{padding:5px 10px;font-size:12px;border-radius:10px;border:2px solid var(--line);background:#fff;cursor:pointer}
.empty{color:var(--sub);font-size:13px;margin:0}

.seg{display:flex;background:#fff;border-radius:14px;padding:4px;margin-bottom:8px}
.seg button{flex:1;border:none;background:none;padding:8px 0;border-radius:10px;font-weight:700;cursor:pointer}
.seg button.on{background:var(--text);color:#fff}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .wd{text-align:center;font-size:12px;font-weight:700;color:var(--sub)}
.cal .day{aspect-ratio:1/1.25;border-radius:10px;background:#faf8f4;display:flex;flex-direction:column;align-items:center;padding:3px 1px;cursor:pointer;border:none;font-size:11px}
.cal .day.out{visibility:hidden}
.cal .day.is-today{outline:2px solid var(--accent)}
.cal .icons{flex:1;display:flex;align-items:center;justify-content:center;gap:1px;width:100%}
.cal .icons svg{width:80%;max-width:40px}
.cal .icons.two svg{width:48%}
.list .entry{cursor:pointer}
.list .date{width:76px;font-size:13px;font-weight:700;flex-shrink:0}

.banner{background:#fff4e6;border:2px solid var(--accent);border-radius:16px;padding:12px;margin-bottom:12px;font-size:13px}
.banner p{margin:0 0 8px}
.backup{margin-top:20px}
.note{font-size:12px;color:var(--sub);margin:0 0 10px}

.maker{margin-top:28px;padding-top:20px;border-top:2px dashed var(--line)}
.line{background:#fff;border:2px solid var(--line-green);border-radius:20px;padding:14px;margin-bottom:16px}
.line b{display:block;font-size:15px}
.line p{font-size:13px;margin:6px 0 10px}
.wide-btn{width:100%;flex:none}
.line-btn{background:var(--line-green);border-color:var(--line-green);color:#fff}
.me{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.photo{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:68% 30%;flex-shrink:0;background:#e3ddd3}
.me p{margin:0;font-size:13px;line-height:1.5}
.me b{font-size:15px}
.sub{color:var(--sub);font-size:12px}
.ad{display:block;text-decoration:none;color:var(--text);background:#fff;border-radius:18px;padding:12px 14px;margin-bottom:10px;border:2px solid var(--line)}
.ad b{display:block;font-size:15px;margin-bottom:4px}
.ad span{font-size:12px;line-height:1.6;display:block}
.ad em{font-style:normal;display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--accent)}
.sns{display:flex;justify-content:center;gap:16px;margin:18px 0 8px}
.sns a{width:40px;height:40px;border-radius:12px;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text)}
.sns svg{width:22px;height:22px;fill:currentColor;stroke:currentColor}
.sns svg[fill=none]{fill:none}
.copy{text-align:center;font-size:11px;color:var(--sub);margin:0}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--text);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}