:root { --ink:#20221f; --muted:#777b72; --line:#e4e5df; --paper:#fbfaf6; --panel:#f2f1eb; --accent:#47624d; --accent-dark:#334b39; --danger:#a03d35; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.topbar { height:104px; padding:22px 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#fff; }
.eyebrow { margin:0 0 3px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif; font-size:28px; font-weight:500; }
.primary { border:0; border-radius:8px; padding:11px 17px; background:var(--accent); color:#fff; font-weight:700; box-shadow:0 2px 8px #2338281c; }
.primary:hover { background:var(--accent-dark); }
.layout { display:grid; grid-template-columns:340px 1fr; height:calc(100% - 104px); }
.sidebar { min-width:0; overflow-y:auto; padding:22px 18px; border-right:1px solid var(--line); background:var(--panel); }
.search input { width:100%; padding:11px 13px; border:1px solid #d6d8d0; border-radius:8px; outline:none; background:#fff; }
.search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #47624d18; }
.count { margin:18px 4px 9px; color:var(--muted); font-size:12px; }
.memo-list { display:grid; gap:7px; }
.memo-card { width:100%; padding:15px; text-align:left; border:1px solid transparent; border-radius:9px; background:transparent; color:inherit; }
.memo-card:hover { background:#fff9; }
.memo-card.active { border-color:#cfd5cc; background:#fff; box-shadow:0 3px 15px #30382f0a; }
.memo-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.memo-card p { height:38px; margin:7px 0; overflow:hidden; color:var(--muted); font-size:13px; line-height:1.45; }
.memo-card time { color:#96998f; font-size:11px; }
.empty-list { padding:34px 8px; text-align:center; color:var(--muted); font-size:13px; }
.editor { min-width:0; overflow-y:auto; background:#fff; }
.welcome { height:100%; display:grid; place-content:center; text-align:center; color:var(--muted); }
.welcome-icon { width:64px; height:64px; margin:auto; display:grid; place-items:center; border-radius:50%; background:var(--panel); color:var(--accent); font-size:28px; }
.welcome h2 { margin:18px 0 4px; color:var(--ink); font:500 24px system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif; }
.welcome p { margin:5px; }
#memoForm { min-height:100%; padding:30px clamp(25px,7vw,110px); }
.editor-head { min-height:38px; display:flex; align-items:center; justify-content:space-between; }
.save-status { color:var(--muted); font-size:12px; }
.danger-ghost { border:0; padding:7px 10px; background:transparent; color:var(--danger); }
.field { display:block; }
.title-input { width:100%; margin-top:15px; border:0; outline:0; color:var(--ink); font:500 clamp(28px,4vw,42px) system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif; }
.content-field { display:block; min-height:420px; margin-top:20px; }
#contentInput { width:100%; min-height:420px; resize:vertical; border:0; outline:0; color:#3d403b; font-size:16px; line-height:1.85; }
.editor-footer { padding-top:20px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.toast { position:fixed; right:24px; bottom:24px; z-index:10; padding:12px 16px; border-radius:8px; background:#252824; color:#fff; opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:720px) { .topbar { height:86px; padding:15px 18px; } .layout { grid-template-columns:1fr; height:auto; } .sidebar { max-height:290px; border-right:0; border-bottom:1px solid var(--line); } .editor { min-height:calc(100vh - 376px); } #memoForm { padding:20px; } }


/* Modern interface refresh */
:root{--ink:#172033;--muted:#697386;--line:#e6e9ef;--paper:#f4f6fa;--panel:#f8f9fc;--accent:#4f46e5;--accent-dark:#3730a3;--danger:#dc3f4f}
body{overflow:hidden;background:var(--paper);-webkit-font-smoothing:antialiased}button,input,textarea{transition:.18s ease}[hidden]{display:none!important}
.topbar{position:relative;z-index:5;height:88px;padding:0 30px;background:rgba(255,255,255,.86);border-color:var(--line);backdrop-filter:blur(18px)}
.topbar>div{position:relative;padding-left:46px}.topbar>div:before{content:"S";position:absolute;left:0;top:50%;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#625bf6,#4338ca);color:#fff;font-size:15px;font-weight:800;transform:translateY(-50%);box-shadow:0 7px 16px #4f46e53d}
.eyebrow{margin-bottom:2px;color:var(--accent);font-size:9px;letter-spacing:.2em}h1{font-size:21px;font-weight:720;letter-spacing:-.025em}
.primary{min-height:42px;border-radius:12px;padding:10px 17px;background:linear-gradient(135deg,#5b52eb,#4338ca);box-shadow:0 7px 18px #4f46e538}.primary:hover{background:linear-gradient(135deg,#4f46e5,#3730a3);transform:translateY(-1px);box-shadow:0 10px 22px #4f46e547}.primary:focus-visible,.memo-card:focus-visible,.danger-ghost:focus-visible{outline:3px solid #4f46e53d;outline-offset:2px}
.layout{grid-template-columns:326px minmax(0,1fr);height:calc(100% - 88px)}.sidebar{padding:24px 18px 32px;border-color:var(--line);background:rgba(248,249,252,.88);scrollbar-width:thin}
.search{position:relative;display:block}.search:before{content:"";position:absolute;z-index:1;left:15px;top:50%;width:11px;height:11px;border:1.8px solid #929bad;border-radius:50%;transform:translateY(-58%);pointer-events:none}.search:after{content:"";position:absolute;z-index:1;left:26px;top:25px;width:6px;height:2px;border-radius:2px;background:#929bad;transform:rotate(45deg);pointer-events:none}
.search input{height:46px;padding:0 14px 0 42px;border-color:#dfe3ea;border-radius:13px;background:#fffc;box-shadow:0 4px 14px #1219260d}.search input:focus{border-color:#a7a1f5;box-shadow:0 0 0 4px #4f46e51a}
.count{margin:21px 7px 10px;font-size:11px;font-weight:700;letter-spacing:.04em}.memo-list{gap:8px}.memo-card{position:relative;padding:15px 16px 14px;border-radius:14px}.memo-card:hover{border-color:#e0e3eb;background:#ffffffb8;transform:translateY(-1px)}.memo-card.active{border-color:#dedcfb;background:#fff;box-shadow:0 8px 24px #272c4914}.memo-card.active:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}.memo-card strong{color:#252d3d;font-size:14px;font-weight:720}.memo-card p{height:36px;margin:7px 0 9px;font-size:12px;line-height:1.5}.memo-card time{color:#98a1b2;font-size:10px;font-weight:600}.empty-list{margin:14px 0;padding:38px 12px;border:1px dashed #d8dce5;border-radius:14px}
.editor{scrollbar-width:thin}.welcome{position:relative;min-height:440px;padding:40px;isolation:isolate}.welcome:before{content:"";position:absolute;z-index:-1;top:50%;left:50%;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,#4f46e512,transparent 68%);transform:translate(-50%,-50%)}.welcome-icon{width:76px;height:76px;border:1px solid #dfdefc;border-radius:24px;background:linear-gradient(145deg,#fff,#f0efff);color:var(--accent);font-size:30px;box-shadow:0 14px 34px #4f46e51f;transform:rotate(-3deg)}.welcome h2{margin:25px 0 7px;font-size:25px;font-weight:730;letter-spacing:-.03em}.welcome p{font-size:14px}
#memoForm{padding:25px clamp(34px,7vw,112px) 36px}.editor-head{min-height:42px}.save-status{color:var(--accent);font-size:11px;font-weight:700}.danger-ghost{border-radius:9px;padding:8px 11px;font-size:12px;font-weight:650}.danger-ghost:hover{background:#fff0f2}.title-input{margin-top:22px;padding-bottom:18px;border-bottom:1px solid transparent;background:transparent;font-size:clamp(30px,4vw,46px);font-weight:750;line-height:1.2;letter-spacing:-.045em}.title-input::placeholder,#contentInput::placeholder{color:#b8beca}.title-input:focus{border-bottom-color:#eceef3}.content-field{margin-top:24px}#contentInput{background:transparent;color:#3f4756;font-size:15px;line-height:1.95}.editor-footer{position:sticky;bottom:-36px;padding-top:18px;background:#fffffff0;backdrop-filter:blur(12px)}
.toast{border-radius:12px;background:#181e2bef;font-size:13px;font-weight:600;transform:translateY(12px) scale(.98);box-shadow:0 12px 34px #1219261a;backdrop-filter:blur(12px)}
@media(max-width:760px){body{overflow:auto}.topbar{position:sticky;top:0;height:76px;padding:0 17px}.topbar>div{padding-left:41px}.topbar>div:before{width:31px;height:31px}.eyebrow{display:none}h1{font-size:18px}.topbar .primary{min-height:40px;padding:9px 13px;font-size:13px}.layout{grid-template-columns:1fr;height:auto}.sidebar{max-height:310px;padding:16px 14px 18px}.memo-list{grid-auto-flow:column;grid-auto-columns:minmax(220px,72vw);overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}.memo-card{scroll-snap-align:start;background:#ffffff8c}.editor{min-height:calc(100vh - 386px);overflow:visible}.welcome{min-height:calc(100vh - 386px);padding:40px 24px}.welcome-icon{width:64px;height:64px;border-radius:20px}.welcome h2{font-size:21px}#memoForm{padding:19px 21px 28px}.title-input{margin-top:15px;font-size:30px}.content-field,#contentInput{min-height:310px}.editor-footer{bottom:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important}}

/* Destructive action button */
.danger-ghost {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  background: #fff7f8;
  color: #c92f42;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(159, 18, 57, .04);
}
.danger-ghost:hover {
  border-color: #fda4af;
  background: #fff0f2;
  color: #a9172d;
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(159, 18, 57, .1);
}
.danger-ghost:active {
  background: #ffe4e8;
  transform: translateY(0);
  box-shadow: none;
}