:root{--paper:#fff;--desk:#eef0f4;--grid:#9e86d033;--grid-strong:#9e86d073;--ink:#2b3348;--ink-soft:#2b3348bf;--pencil:#7b8494;--accent:#41809e;--red-pen:#c05252;--cell:24px}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--desk)}body{color:var(--ink);font-family:Noto Sans JP,sans-serif;font-size:15px;line-height:var(--cell);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}button,input,textarea,select{font:inherit;color:inherit}.page{max-width:560px;min-height:100dvh;padding:calc(var(--cell) * .5) 16px calc(var(--cell) * 5);background-color:var(--paper);background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--cell) - 1px), var(--grid) calc(var(--cell) - 1px), var(--grid) var(--cell)), repeating-linear-gradient(to right, transparent 0, transparent calc(var(--cell) - 1px), var(--grid) calc(var(--cell) - 1px), var(--grid) var(--cell));margin:0 auto;position:relative;box-shadow:0 0 0 1px #3c465f14,0 2px 10px #3c465f14}.note-header{height:calc(var(--cell) * 2);justify-content:space-between;align-items:flex-end;gap:8px;display:flex}.note-title{letter-spacing:.08em;color:var(--ink);font-size:17px;font-weight:500}.tabs{margin:calc(var(--cell) * .5) -8px 0;scrollbar-width:none;align-items:flex-end;gap:4px;padding:6px 8px 0;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab{color:var(--ink-soft);opacity:.65;cursor:pointer;border:1px solid #3c506e29;border-bottom:none;border-radius:6px 6px 0 0;flex-shrink:0;padding:5px 14px 3px;font-size:13px}.tab-active{opacity:1;color:var(--ink);padding-top:8px;font-weight:500;box-shadow:0 -1px 3px #3c506e1f}.tabs+.sheet{border-top:2px solid var(--grid-strong)}.sheet{padding-top:calc(var(--cell) * .5)}.search-line{height:var(--cell);margin-bottom:calc(var(--cell) * .5);color:var(--pencil);align-items:baseline;gap:8px;display:flex}.search-label{flex-shrink:0;font-size:12px}.search-input{max-width:220px;color:var(--ink);background:0 0;border:none;border-bottom:1px solid #7b849480;flex:1;padding:0 4px 1px;font-size:13px}.search-input:focus{border-bottom-color:var(--accent);outline:none}.search-input::placeholder{color:#7b84948c}.archived-toggle{height:var(--cell);color:var(--pencil);cursor:pointer;align-items:center;gap:7px;width:fit-content;font-size:12px;display:flex}.archived-toggle input{width:14px;height:14px;accent-color:var(--accent)}.food-list{list-style:none}.food-row{width:100%;height:calc(var(--cell) * 2);text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:10px;padding:0 4px;display:flex}.food-row:active{background:#41809e0f}.food-name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:16px;overflow:hidden}.food-date{color:var(--pencil);flex-shrink:0;font-size:11px}.food-thumb{object-fit:cover;border:2px solid #fff;border-radius:2px;outline:1px solid #3c506e26;flex-shrink:0;width:38px;height:38px;box-shadow:0 1px 3px #3c465f2e}.strike{position:relative}.strike:after{content:"";background:var(--pencil);pointer-events:none;height:1.5px;position:absolute;top:50%;left:-2px;right:-2px}.row-archived{opacity:.5}.row-archived .food-name{color:var(--pencil)}.detail-archived .detail-name,.detail-archived .detail-photo,.detail-archived .detail-memo,.detail-archived .detail-meta{opacity:.55}.archived-note{margin-top:var(--cell);color:var(--pencil);font-size:13px}.empty-note{margin-top:var(--cell);color:var(--pencil);font-size:14px}.fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:10;background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:12px 18px;font-size:15px;font-weight:500;position:fixed;box-shadow:0 2px 8px #2b334840}.fab:active{transform:translateY(1px);box-shadow:0 1px 3px #2b334840}.link-back{color:var(--pencil);cursor:pointer;margin-bottom:calc(var(--cell) * .5);background:0 0;border:none;padding:2px 4px;font-size:13px;display:block}.detail-name{font-size:23px;font-weight:500;line-height:calc(var(--cell) * 2);border-bottom:2px solid var(--accent);padding:0 6px 4px 2px;display:inline-block}.detail-meta{margin-top:calc(var(--cell) * .5);align-items:baseline;gap:14px;display:flex}.detail-category{color:var(--accent);background:#41809e1a;border:1px solid #41809e4d;border-radius:4px;padding:1px 10px;font-size:12px}.detail-date{color:var(--pencil);font-size:12px}.taped-photo{background:#fff;border:1px solid #3c506e24;border-radius:2px;padding:7px;display:inline-block;position:relative;box-shadow:0 2px 8px #3c465f29}.taped-photo-img{width:264px;max-width:100%;height:auto;display:block}.tape{clip-path:polygon(2% 8%,6% 0,100% 4%,97% 46%,100% 94%,95% 100%,3% 96%,0 55%);width:72px;height:24px;position:absolute;top:-11px;box-shadow:0 1px 2px #3c465f24}.detail-photo{margin-top:var(--cell);padding:10px 4px 4px}.detail-photo .taped-photo-img{width:min(340px,76vw)}.detail-memo{margin-top:var(--cell);font-size:15px;line-height:var(--cell);white-space:pre-wrap;color:var(--ink)}.detail-actions{margin-top:calc(var(--cell) * 2);flex-wrap:wrap;gap:12px;display:flex}.btn{color:var(--ink);cursor:pointer;background:#fff;border:1px solid #2b334866;border-radius:6px;padding:7px 18px;font-size:14px}.btn:active{background:#2b33480f}.btn:disabled{opacity:.35;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}.btn-primary:active{background:#37718c}.btn-danger{color:var(--red-pen);border-color:#c052528c}.btn-pencil{color:var(--pencil);border-style:dashed;border-color:#7b84948c}.btn-small{padding:3px 12px;font-size:13px}.form-title{font-size:20px;font-weight:500;line-height:calc(var(--cell) * 2)}.form-field{margin-top:var(--cell)}.form-label{color:var(--pencil);margin-bottom:4px;font-size:12px;display:block}.form-label-note{font-size:11px}.required-mark{color:var(--red-pen);font-size:11px}.form-input{width:100%;height:calc(var(--cell) * 1.5);background:0 0;border:none;border-bottom:1.5px solid #2b334873;padding:0 4px;font-size:17px}.form-input:focus{border-bottom-color:var(--accent);border-bottom-width:2px;outline:none}.form-input::placeholder,.form-memo::placeholder{color:#7b849480}.form-memo{background:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--cell) - 1.5px), var(--grid-strong) calc(var(--cell) - 1.5px), var(--grid-strong) var(--cell));width:100%;font-size:15px;line-height:var(--cell);resize:vertical;border:none;padding:0 4px}.form-memo:focus{outline:none}.photo-input{display:none}.photo-placeholder{width:min(240px,60vw);height:calc(var(--cell) * 4);color:var(--pencil);cursor:pointer;background:#41809e0a;border:1.5px dashed #7b84948c;border-radius:8px;font-size:14px}.photo-preview{padding:12px 4px 0}.photo-preview .taped-photo-img{width:min(240px,60vw)}.photo-preview-actions{gap:20px;margin-top:10px;display:flex}.link-plain{color:var(--pencil);cursor:pointer;text-underline-offset:3px;background:0 0;border:none;padding:2px 4px;font-size:13px;text-decoration:underline}.category-choices{flex-wrap:wrap;gap:10px;display:flex}.category-choice{color:var(--ink-soft);cursor:pointer;background:#fff;border:1px solid #7b849473;border-radius:6px;padding:5px 16px;font-size:14px}.choice-selected{border:1.5px solid var(--accent);color:var(--ink);background:#41809e14;font-weight:500}.form-actions{margin-top:calc(var(--cell) * 2)}.settings-list{margin-top:var(--cell);list-style:none}.settings-row{width:100%;height:calc(var(--cell) * 2);text-align:left;color:var(--ink);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:16px;display:block}.settings-row:active{background:#41809e0f}.settings-row:disabled{opacity:.4}.settings-row-danger{color:var(--red-pen)}.settings-list>li{margin-bottom:calc(var(--cell) * .5)}.margin-note{color:var(--pencil);margin-top:2px;font-size:11px}.category-manage-list{margin-top:var(--cell);list-style:none}.category-manage-row{min-height:calc(var(--cell) * 2);align-items:center;gap:8px;padding:0 2px;display:flex}.category-manage-name{text-align:left;min-width:0;color:var(--ink);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;flex:1;padding:4px;font-size:16px;overflow:hidden}.category-count{color:var(--pencil);font-size:11px}.category-rename-input{min-width:0;height:calc(var(--cell) * 1.5);flex:1}.link-danger{color:var(--red-pen)}.category-add-line{margin-top:calc(var(--cell) * 1.5);align-items:center;gap:10px;display:flex}.category-add-input{flex:1;min-width:0;font-size:15px}