@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap";:root{--wood-dark: #202020;--wood-medium: #e8e8e8;--wood-light: #f5f5f5;--wood-pale: #fafafa;--bg-room: transparent;--bg-shelf-back: rgba(252, 252, 252, .6);--bg-surface: rgba(255, 255, 255, .95);--border-color: rgba(0, 0, 0, .08);--border-subtle: rgba(0, 0, 0, .05);--text-main: #333333;--text-secondary: #555555;--text-muted: #888888;--text-on-dark: #ffffff;--accent-gold: #007aff;--accent-gold-light: #5ac8fa;--accent-gold-subtle: rgba(0, 122, 255, .08);--accent-red: #ff3b30;--accent-green: #34c759;--accent-blue: #5856d6;--font-serif: "Noto Serif JP", serif;--font-sans: "Inter", "Noto Sans JP", sans-serif;--shadow-shelf: inset 0 4px 6px -4px rgba(0,0,0,.05);--shadow-board: 0 4px 12px rgba(0,0,0,.03);--shadow-xs: 0 2px 4px rgba(0, 0, 0, .02);--shadow-sm: 0 4px 12px rgba(0, 0, 0, .04);--shadow-md: 0 8px 24px rgba(0, 0, 0, .06);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .08);--shadow-card: 0 4px 16px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .02);--shadow-card-hover: 0 12px 28px rgba(0, 0, 0, .08), 0 4px 8px rgba(0, 0, 0, .04);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 100px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-room);color:var(--text-main);font-family:var(--font-sans);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;max-width:1200px;margin:0 auto;padding:1.75rem 1.5rem;min-height:100vh}h1{font-family:var(--font-serif);font-weight:700;font-size:1.85rem;text-align:center;color:var(--text-main);margin-bottom:.3rem;letter-spacing:.04em;position:relative}h1:after{content:"";display:block;width:40px;height:2px;background:linear-gradient(90deg,var(--accent-gold),var(--accent-gold-light));margin:.6rem auto 1rem;border-radius:1px}.subtitle{text-align:center;font-size:.85rem;color:var(--text-muted);margin-bottom:1.5rem;font-family:var(--font-sans);font-weight:300;letter-spacing:.03em}.control-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem;padding-bottom:0;border-bottom:none}.tabs{display:flex;gap:6px;overflow-x:auto;padding:3px;background-color:var(--wood-pale);border-radius:var(--radius-pill);scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab-btn{background:transparent;border:none;font-family:var(--font-sans);font-size:.82rem;font-weight:500;padding:.4rem 1rem;cursor:pointer;color:var(--text-secondary);border-radius:var(--radius-pill);transition:all var(--transition-normal);white-space:nowrap;letter-spacing:.01em}.tab-btn:hover{background-color:#ffffffb3;color:var(--text-main)}.tab-btn.active{background-color:var(--wood-dark);color:var(--text-on-dark);font-weight:600;box-shadow:var(--shadow-xs)}.view-switches{display:flex;gap:4px;background-color:var(--wood-pale);padding:3px;border-radius:var(--radius-md)}.icon-btn{background:transparent;border:none;color:var(--text-muted);padding:.4rem .5rem;border-radius:calc(var(--radius-md) - 2px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal)}.icon-btn:hover{color:var(--text-main);background-color:#fff9}.icon-btn.active{color:var(--text-main);background-color:var(--bg-surface);box-shadow:var(--shadow-xs)}.bookshelf-container{background-color:var(--bg-shelf-back);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:2rem;overflow:hidden}.bookshelf-shelf{position:relative;min-height:240px;padding:1rem 1rem 0;display:flex;align-items:flex-end;gap:1.25rem;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--wood-medium) transparent;box-shadow:var(--shadow-shelf)}.bookshelf-shelf:after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--wood-light);border-top:1px solid var(--border-color);box-shadow:var(--shadow-board);z-index:10}.shelf-title-plate{background-color:var(--wood-pale);border-bottom:1px solid var(--border-subtle);padding:.4rem 1.25rem;font-size:.75rem;font-family:var(--font-sans);color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center}.shelf-pickup-badge{color:var(--accent-gold);font-weight:700;font-size:.7rem;letter-spacing:.04em}.bookshelf-item{position:relative;cursor:pointer;transition:transform var(--transition-normal),margin var(--transition-normal);z-index:5;display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none;margin-bottom:16px}.bookshelf-item:hover{transform:translateY(-8px) scale(1.03);z-index:20}.book-spine{width:32px;height:170px;background-color:var(--accent-red);border-radius:2px 4px 4px 2px;border-left:3px solid rgba(255,255,255,.15);border-right:1px solid rgba(0,0,0,.2);box-shadow:-2px 0 5px #00000026,3px 0 5px #0003;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px 0;transition:width var(--transition-normal),height var(--transition-normal)}.book-spine-text{writing-mode:vertical-rl;color:var(--text-on-dark);font-family:var(--font-serif);font-size:.75rem;font-weight:500;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:140px}.book-cover-view{width:110px;height:160px;background-color:var(--wood-pale);border-radius:2px 4px 4px 2px;box-shadow:2px 2px 8px #0000002e,-1px 0 3px #00000014;overflow:hidden;position:relative;border:1px solid rgba(44,30,26,.12);display:flex;flex-direction:column}.book-cover-img{width:100%;height:100%;object-fit:cover;display:block;background-color:var(--wood-pale)}.book-cover-placeholder{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:.75rem;text-align:center;font-family:var(--font-serif);background-color:var(--accent-blue);color:#fff}.book-cover-placeholder.book{background-color:var(--accent-blue)}.book-cover-placeholder.manga{background-color:var(--accent-red)}.book-cover-placeholder.movie{background-color:var(--accent-green)}.book-cover-placeholder.anime{background-color:var(--accent-gold)}.book-cover-placeholder.drama{background-color:var(--wood-medium)}.book-cover-placeholder-title{font-size:.8rem;line-height:1.3;word-break:break-all;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.book-cover-placeholder-meta{font-size:.65rem;opacity:.8}.bookmark-ribbon{position:absolute;top:-10px;right:12px;width:14px;height:32px;background-color:var(--accent-gold);z-index:15;box-shadow:1px 1px 3px #0003}.bookmark-ribbon:after{content:"";position:absolute;bottom:0;left:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:6px solid var(--bg-shelf-back)}.book-spine .bookmark-ribbon{right:auto;left:9px;top:-12px;height:24px}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.25rem;margin-bottom:2rem}.item-card{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--transition-smooth),box-shadow var(--transition-smooth);cursor:pointer;position:relative}.item-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}.card-cover-container{height:170px;background-color:var(--wood-pale);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.card-cover-img{width:100%;height:100%;object-fit:cover}.card-badge{position:absolute;top:10px;left:10px;background-color:#ffffffd9;color:var(--text-main);padding:.25rem .6rem;font-size:.65rem;border-radius:var(--radius-pill);font-family:var(--font-sans);font-weight:600;letter-spacing:.02em;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:var(--shadow-xs);border:1px solid var(--border-color)}.card-pickup-tag{position:absolute;top:0;right:15px;background-color:var(--accent-gold);color:#fff;font-size:.6rem;padding:.45rem .3rem .65rem;writing-mode:vertical-rl;font-family:var(--font-serif);letter-spacing:.05em;box-shadow:1px 2px 4px #00000026;clip-path:polygon(0 0,100% 0,100% 100%,50% 85%,0 100%)}.card-body{padding:1rem 1.1rem;flex-grow:1;display:flex;flex-direction:column}.card-title{font-family:var(--font-serif);font-size:1rem;font-weight:500;color:var(--text-main);margin-bottom:.35rem;line-height:1.45;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-meta-line{font-size:.78rem;color:var(--text-muted);margin-bottom:.35rem}.card-rating{color:var(--accent-gold);font-size:.85rem;margin-bottom:.5rem}.card-comment{font-size:.8rem;color:var(--text-secondary);background-color:var(--wood-pale);padding:.45rem .65rem;border-radius:var(--radius-sm);border-left:2px solid var(--accent-gold-light);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:auto}.filter-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);padding:.75rem 1rem;border-radius:var(--radius-md);margin-bottom:1.25rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;box-shadow:var(--shadow-xs)}.filter-group{display:flex;flex-direction:column;gap:.2rem}.filter-label{font-size:.68rem;color:var(--text-muted);font-family:var(--font-sans);font-weight:500;text-transform:uppercase;letter-spacing:.04em}.filter-select,.form-input,.form-select,.form-textarea{border:1px solid var(--border-color);padding:.4rem .65rem;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.82rem;color:var(--text-main);background-color:var(--bg-surface);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.filter-select:focus,.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent-gold-light);box-shadow:0 0 0 3px var(--accent-gold-subtle)}.sort-control{display:flex;flex-direction:column;gap:.2rem}.sort-select{border:1px solid var(--border-color);padding:.4rem 1.6rem .4rem .65rem;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.82rem;color:var(--text-main);background-color:var(--bg-surface);outline:none;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a877c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.sort-select:focus{border-color:var(--accent-gold-light);box-shadow:0 0 0 3px var(--accent-gold-subtle)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#2c1e1a73;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:100;padding:1rem}.modal-content{background:var(--bg-surface);border-radius:var(--radius-lg);width:100%;max-width:680px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 48px #0003,0 0 0 1px #2c1e1a0d;animation:modal-fade .25s var(--transition-smooth)}@keyframes modal-fade{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{padding:1.1rem 1.5rem;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--bg-surface);z-index:10}.modal-title{font-family:var(--font-serif);font-size:1.2rem;color:var(--text-main)}.close-btn{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text-muted);transition:color var(--transition-fast);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}.close-btn:hover{color:var(--accent-red);background-color:#8c2d190f}.modal-body{padding:1.25rem 1.5rem}.detail-layout{display:grid;grid-template-columns:150px 1fr;gap:1.25rem}@media(max-width:580px){.detail-layout{grid-template-columns:1fr}}.detail-cover{width:100%;aspect-ratio:2/3;border-radius:var(--radius-sm);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);object-fit:cover}.detail-cover-placeholder{width:100%;height:225px;display:flex;align-items:center;justify-content:center;background-color:var(--wood-pale);color:var(--text-muted);border-radius:var(--radius-sm);border:1px dashed var(--border-color);font-family:var(--font-serif);font-size:.85rem}.detail-info{display:flex;flex-direction:column;gap:.6rem}.detail-title{font-family:var(--font-serif);font-size:1.5rem;line-height:1.35}.detail-rating{color:var(--accent-gold);font-size:1.15rem}.detail-meta-grid{display:grid;grid-template-columns:auto 1fr;gap:.4rem .85rem;font-size:.85rem;border-bottom:1px solid var(--border-subtle);padding-bottom:.6rem;margin-bottom:.35rem}.detail-meta-label{color:var(--text-muted);font-weight:500;font-size:.82rem}.detail-section-title{font-family:var(--font-serif);font-size:.95rem;margin-top:.4rem;color:var(--text-main);border-bottom:1px solid var(--border-subtle);padding-bottom:.2rem}.detail-text{font-size:.88rem;white-space:pre-wrap;color:var(--text-main);line-height:1.7}.ai-summary-box{background-color:#f8f6f3;border-radius:var(--radius-md);border-left:3px solid var(--accent-gold);padding:.75rem 1rem;font-size:.88rem;position:relative;overflow:hidden}.ai-summary-box:after{content:"Gemini AI";position:absolute;top:4px;right:8px;font-size:.6rem;color:var(--accent-gold);font-family:var(--font-sans);font-weight:500;opacity:.6}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}@media(max-width:580px){.form-grid{grid-template-columns:1fr}}.form-group{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.85rem}.form-group.full-width{grid-column:1 / -1}.form-label{font-size:.78rem;color:var(--text-secondary);font-weight:500}.form-textarea{min-height:90px;resize:vertical}.btn-container{display:flex;justify-content:flex-end;gap:.65rem;margin-top:1.25rem;border-top:1px solid var(--border-subtle);padding-top:.85rem}.btn{padding:.45rem 1.1rem;border-radius:var(--radius-sm);font-size:.85rem;cursor:pointer;transition:all var(--transition-normal);font-family:var(--font-sans);font-weight:500;border:none;letter-spacing:.01em}.btn-secondary{background-color:var(--wood-pale);color:var(--text-secondary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--border-color);color:var(--text-main)}.btn-primary{background-color:var(--wood-dark);color:var(--text-on-dark)}.btn-primary:hover{background-color:#1f1411}.btn-danger{background-color:var(--accent-red);color:#fff}.btn-danger:hover{background-color:#6d1e0f}.btn-ai{background-color:var(--accent-gold-subtle);color:var(--accent-gold);border:1px solid var(--accent-gold-light);display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;padding:.3rem .7rem}.btn-ai:hover{background-color:var(--accent-gold-light);color:#fff;border-color:var(--accent-gold)}.footer-settings{margin-top:3rem;border-top:1px solid var(--border-subtle);padding-top:1.25rem;display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--text-muted)}.footer-link{color:var(--text-muted);text-decoration:none;cursor:pointer;transition:color var(--transition-fast)}.footer-link:hover{color:var(--accent-gold)}.admin-badge{background-color:var(--accent-green);color:#fff;padding:.15rem .5rem;font-size:.68rem;border-radius:var(--radius-pill);font-weight:500}.dropzone{border:2px dashed var(--border-color);padding:2rem;text-align:center;border-radius:var(--radius-md);background-color:var(--bg-room);cursor:pointer;transition:border-color var(--transition-normal),background-color var(--transition-normal)}.dropzone:hover,.dropzone.active{border-color:var(--accent-gold-light);background-color:var(--accent-gold-subtle)}.dropzone-text{font-size:.85rem;color:var(--text-muted)}.mapping-table{width:100%;border-collapse:collapse;margin-top:1.25rem;font-size:.82rem}.mapping-table th,.mapping-table td{border:1px solid var(--border-color);padding:.5rem .6rem;text-align:left}.mapping-table th{background-color:var(--wood-pale);font-family:var(--font-sans);font-weight:600;font-size:.78rem}@media(max-width:768px){#root{padding:1rem .75rem}.control-bar{flex-direction:column;align-items:stretch}.tabs{align-self:stretch;overflow-x:auto}.view-switches{justify-content:flex-end}.filter-panel{flex-direction:column;align-items:stretch;gap:.6rem}.items-grid{grid-template-columns:1fr;gap:1rem}}.scroll-to-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--wood-dark, #2c1e1a);color:#fff;border:none;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease,background .3s ease;z-index:90;box-shadow:0 4px 12px #0003}.scroll-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.scroll-to-top:hover{background:var(--accent-gold, #c4943d);transform:translateY(-2px)}.sticky-bar{position:sticky;top:0;z-index:50;background:var(--bg-room, #fcfbfa);padding-top:.75rem;margin-top:-.75rem}