:root{--color-bg-body: #f8f9fa;--color-bg-card: #ffffff;--color-bg-panel: #ffffff;--color-text-primary: #333333;--color-text-secondary: #5f6368;--color-text-accent: #0055ff;--color-border-grid: #e2e8f0;--color-border-active: #0055ff;--color-shadow-card: 0 1px 3px rgba(0, 0, 0, .1);--color-shadow-hover: 0 4px 6px rgba(0, 85, 255, .1);--font-family-base: "Noto Sans JP", sans-serif;--font-family-display: "Chakra Petch", sans-serif;--font-family-mono: "Roboto Mono", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-weight-regular: 400;--font-weight-bold: 700;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 4rem;--border-radius-sm: 2px;--border-radius-md: 4px;--transition-fast: .2s ease;--transition-medium: .3s cubic-bezier(.4, 0, .2, 1)}:root{font-family:var(--font-family-base);line-height:1.5;font-weight:400;color-scheme:light;color:var(--color-text-primary);background-color:var(--color-bg-body);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;width:100%}a{color:inherit;text-decoration:none}ul{list-style:none}button{background:none;border:none;cursor:pointer;font:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-body)}::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a0aec0}.layout-container{display:flex;flex-direction:column;min-height:100vh;background-color:var(--color-bg-body);position:relative;overflow-x:hidden}.layout-grid-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(var(--color-border-grid) 1px,transparent 1px),linear-gradient(90deg,var(--color-border-grid) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0;opacity:.5}.main-content{position:relative;z-index:1;flex:1;padding:var(--spacing-xl);max-width:1400px;margin:0 auto;width:100%}@media(max-width:768px){.main-content{padding:var(--spacing-md)}}.main-title{font-family:Orbitron,Sawarabi Gothic,sans-serif;font-size:var(--font-size-2xl);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-primary);text-shadow:0 0 1px rgba(0,85,255,.1);position:relative;width:fit-content}.main-title:after{content:"";position:absolute;bottom:-4px;left:0;width:100%;height:2px;background-color:var(--color-text-accent)}.genre-card{display:block;width:100%;min-height:120px;background:var(--color-bg-card);border:1px solid var(--color-border-grid);padding:var(--spacing-md);margin-bottom:var(--spacing-sm);transition:all var(--transition-fast);cursor:pointer;position:relative;text-align:left;box-sizing:border-box}.genre-card:focus{outline:none}.genre-card:focus-visible{border-color:var(--color-border-active);box-shadow:var(--color-shadow-hover)}.genre-card:hover{border-color:var(--category-color, var(--color-border-active));box-shadow:var(--color-shadow-hover);transform:translate(4px)}.genre-card:hover:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:var(--category-color, var(--color-border-active))}.genre-title{font-family:var(--font-family-display);font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);line-height:1.4;min-height:2em;margin-bottom:var(--spacing-xs);display:flex;align-items:flex-start}.genre-name-en{font-size:var(--font-size-xs);color:var(--color-text-secondary);font-weight:400;font-family:var(--font-family-display);margin-left:auto}.genre-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);min-height:2.8em;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bento-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--spacing-md);width:100%;max-width:1200px;margin:0 auto}.bento-column,.category-header,.category-title,.category-subtitle,.category-content{display:contents}.detail-panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff9;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;opacity:0;pointer-events:none;transition:opacity var(--transition-fast)}.detail-panel-overlay.is-open{opacity:1;pointer-events:auto}.detail-panel{position:fixed;top:0;right:0;width:100%;max-width:900px;height:100%;background-color:var(--color-bg-panel);box-shadow:-4px 0 20px #0000001a;z-index:101;transform:translate(100%);transition:transform var(--transition-medium);display:flex;flex-direction:column}.detail-panel.is-open{transform:translate(0)}.panel-header{padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--color-border-grid);display:flex;justify-content:space-between;align-items:flex-start;background:var(--color-bg-body);flex-shrink:0}.close-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border-grid);border-radius:50%;transition:all var(--transition-fast);cursor:pointer}.close-button:hover{background-color:#ef4444;color:#fff;border-color:#ef4444}.panel-content{flex:1;overflow-y:auto;padding:var(--spacing-xl);animation:fadeSlideIn .3s ease-out}@keyframes fadeSlideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-lg)}.book-card{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);border:1px solid var(--color-border-grid);background:var(--color-bg-card);transition:all var(--transition-fast);border-radius:var(--border-radius-sm);text-decoration:none;color:inherit;align-items:flex-start}.book-card:hover{border-color:var(--color-border-active);box-shadow:var(--color-shadow-hover);transform:translateY(-2px)}.book-cover{width:100px;height:150px;background-color:#eee;object-fit:cover;flex-shrink:0;border:1px solid var(--color-border-grid)}.book-info{flex:1;display:flex;flex-direction:column;height:100%}.book-title{font-family:var(--font-family-base);font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);line-height:1.3;margin-bottom:var(--spacing-xs)}.book-title-en{font-size:var(--font-size-xs);color:var(--color-text-secondary);font-family:var(--font-family-mono);margin-bottom:var(--spacing-xs)}.book-meta{font-size:var(--font-size-sm);color:var(--color-text-primary);margin-bottom:var(--spacing-sm);font-weight:500}.book-description{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--spacing-md);display:-webkit-box;-webkit-line-clamp:8;line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;flex-grow:1}.pr-badge{font-size:10px;padding:1px 4px;border:1px solid var(--color-border-grid);border-radius:2px;color:var(--color-text-secondary);font-weight:400}@media(max-width:480px){.pr-badge:before{content:"PR"}}.book-links{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:auto;width:auto;align-items:flex-start}.shop-link-card{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--color-border-grid);border-radius:var(--border-radius-sm);background:var(--color-bg-body);color:var(--color-text-primary);text-decoration:none;transition:all var(--transition-fast);width:100px;max-width:fit-content;height:32px}.shop-link-card:hover{transform:translateY(-2px);box-shadow:var(--color-shadow-hover)}.shop-logo{display:flex;align-items:center;justify-content:center}.shop-link-card.amazon{border-color:#f90;background-color:#fffaf0}.shop-link-card.amazon:hover{background-color:#fff0d6;border-color:#f90}@media(max-width:768px){.detail-panel{max-width:100%}.book-grid{grid-template-columns:1fr}}.genre-name-jp{font-family:var(--font-family-display);font-size:var(--font-size-2xl);color:var(--color-text-primary);letter-spacing:.05em;margin-bottom:2px}.out-of-print-notice{margin-top:var(--spacing-xl);padding:var(--spacing-md);background-color:var(--color-bg-card);border:1px solid var(--color-border-grid);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm)}.out-of-print-notice details{cursor:pointer}.out-of-print-notice summary{color:var(--color-text-secondary);font-weight:700;list-style:none;display:flex;align-items:center;gap:var(--spacing-xs)}.out-of-print-notice summary::-webkit-details-marker{display:none}.out-of-print-notice summary:before{content:"→";font-family:var(--font-family-mono);transition:transform var(--transition-fast)}.out-of-print-notice details[open] summary:before{transform:rotate(90deg)}.notice-details{margin-top:var(--spacing-md);padding-left:var(--spacing-sm);color:var(--color-text-primary);line-height:1.6}.notice-details ul{padding-left:var(--spacing-md);margin:0}.notice-details li{margin-bottom:var(--spacing-xs)}.shop-list{color:var(--color-text-secondary)}.subgenre-link{color:var(--color-text-accent);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;cursor:pointer;transition:color .2s ease}.subgenre-link:hover{color:var(--color-accent);text-decoration-style:solid}