:root{--paper:#fdfbf6;--card:#fff;--line:#e4decf;--line2:#ede8da;--shade:#f1eee3;--green:#2f6e46;--green2:#3c8a58;--citrus:#e8a62c;--text:#2e332b;--muted:#a8a394;--muted2:#6e6a5c}*{box-sizing:border-box}body{background:var(--paper);color:var(--text);margin:0;font-family:Noto Sans JP,Hiragino Sans,sans-serif}.app{max-width:960px;margin:0 auto;padding:0 14px 96px}:focus-visible{outline:2px solid var(--green);outline-offset:2px}header{z-index:10;background:var(--paper);padding:12px 0 10px;position:sticky;top:0;box-shadow:0 10px 12px -12px #5a50322e}.brand{justify-content:space-between;align-items:center;padding:0 2px 10px;display:flex}.brand h1{color:var(--green);letter-spacing:.01em;margin:0;font-size:19px;font-weight:800}.brand h1 .brand-accent{color:var(--citrus)}.logout{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:6px 10px;font-size:12.5px}.logout:hover{background:var(--shade);color:var(--muted2)}.search-row{gap:8px;display:flex}.search-box{flex:1;align-items:center;display:flex;position:relative}.search-icon{opacity:.45;pointer-events:none;font-size:14px;position:absolute;left:12px}.search-box input{border:1.5px solid var(--line);background:var(--card);width:100%;color:var(--text);border-radius:14px;padding:11px 38px;font-size:16px;transition:border-color .15s}.search-box input::placeholder{color:var(--muted)}.search-box input:focus{border-color:var(--green);outline:none}.clear{background:var(--shade);color:var(--muted2);cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;line-height:1;display:flex;position:absolute;right:9px}.clear:hover{background:var(--line2)}.fav{border:1.5px solid var(--line);background:var(--card);cursor:pointer;filter:grayscale();opacity:.55;border-radius:14px;padding:0 14px;font-size:17px}.fav.on{border-color:var(--citrus);filter:none;opacity:1;background:#fdf3dc}.url-hint{color:var(--green);background:#eaf2e4;border:1px solid #d3e2c8;border-radius:10px;margin:8px 2px 0;padding:8px 12px;font-size:12.5px}.tags{scrollbar-width:none;gap:6px;padding:10px 0;display:flex;overflow-x:auto}.tags::-webkit-scrollbar{display:none}.chip{background:var(--shade);color:var(--muted2);cursor:pointer;border:none;border-radius:999px;flex:none;padding:6px 13px;font-size:13px;transition:background .12s,color .12s}.chip:hover{background:var(--line2)}.chip.on{background:var(--green);color:#fff;font-weight:700}.grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}@media (width>=640px){.grid{grid-template-columns:repeat(4,1fr)}}.card{background:var(--card);border:1.5px solid var(--line2);cursor:pointer;box-shadow:0 3px 0 var(--line2);border-radius:16px;transition:transform .12s,box-shadow .12s;overflow:hidden}.card:hover,.card:active{box-shadow:0 6px 0 var(--line2), 0 10px 22px #5a50321f;transform:translateY(-2px)}.thumb{aspect-ratio:4/3;background:var(--shade);position:relative}.thumb img{object-fit:cover;width:100%;height:100%;display:block}.placeholder{opacity:.4;justify-content:center;align-items:center;height:100%;font-size:40px;display:flex}.spinner{color:var(--muted2);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#fdfbf6cc;justify-content:center;align-items:center;gap:7px;font-size:12.5px;display:flex;position:absolute;inset:0}.spinner:before{content:"";border:2.5px solid var(--green);border-top-color:#0000;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.source{color:#fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#2e332b99;border-radius:7px;padding:2px 7px;font-size:12px;position:absolute;bottom:7px;left:7px}.star{cursor:pointer;filter:grayscale();background:#ffffffeb;border:none;border-radius:999px;padding:4px 6px;position:absolute;top:5px;right:5px;box-shadow:0 1px 4px #0000001f}.star.on{filter:none}.title{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;padding:10px 12px 4px;font-size:13px;font-weight:700;line-height:1.45;display:-webkit-box;overflow:hidden}.tagline{color:#7fa06b;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0 12px 11px;font-size:10.5px;font-weight:600;overflow:hidden}.title:last-child{padding-bottom:11px}.empty{text-align:center;color:var(--muted);grid-column:1/-1;padding:48px 0}.fab{z-index:15;background:linear-gradient(135deg, var(--green2), var(--green));color:#fff;letter-spacing:.02em;cursor:pointer;border:none;border-radius:999px;padding:13px 20px;font-size:15px;font-weight:800;transition:transform .1s;position:fixed;bottom:20px;right:16px;box-shadow:0 8px 20px #2f6e4659}.fab:active{transform:scale(.96)}.modal-back{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#3c372866;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--card);border-radius:18px;width:100%;max-width:480px;padding:22px;box-shadow:0 16px 48px #3c372840}.modal h1,.modal h2{color:var(--green);margin-top:0;font-size:18px}.modal h1 .brand-accent,.modal h2 .brand-accent{color:var(--citrus)}.modal input,.modal textarea,.detail input,.detail textarea{border:1.5px solid var(--line);background:var(--card);width:100%;color:var(--text);border-radius:12px;margin:6px 0;padding:11px;font-family:inherit;font-size:16px}.modal input::placeholder,.modal textarea::placeholder,.detail input::placeholder,.detail textarea::placeholder{color:var(--muted)}.modal input:focus,.modal textarea:focus,.detail input:focus,.detail textarea:focus{border-color:var(--green);outline:none}.btn{background:linear-gradient(135deg, var(--green2), var(--green));color:#fff;cursor:pointer;border:none;border-radius:12px;padding:11px 18px;font-size:15px;font-weight:700}.btn.secondary{background:var(--card);color:var(--text);border:1.5px solid var(--line)}.btn.danger{color:#fff;background:#b3402f}.btn:disabled{opacity:.45}.detail{max-width:640px;margin:0 auto;padding:14px 14px 40px}.detail .hero{aspect-ratio:16/10;object-fit:cover;background:var(--shade);border-radius:16px;width:100%;display:block}.hero-link{display:block;position:relative}.hero-badge{color:#fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#2e332b9e;border-radius:8px;padding:4px 10px;font-size:12px;position:absolute;bottom:10px;right:10px}.copied{color:var(--green);font-size:14px}.detail label{color:var(--muted2);margin-top:16px;font-size:13px;font-weight:700;display:block}.detail a{color:var(--green)}.row{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.error{color:#b3402f;font-size:14px}.login{max-width:360px;margin:15vh auto;padding:22px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}