.page-shell{max-width:900px;margin:0 auto;padding:var(--spacing-xl) var(--spacing-lg) var(--spacing-xxl)}.article-container{background:#fffffffa;border-radius:18px;box-shadow:var(--shadow-md);padding:var(--spacing-xl);min-height:400px}.article-header{border-bottom:2px solid var(--border-light);padding-bottom:var(--spacing-md);margin-bottom:var(--spacing-xl)}.article-title{color:var(--primary-blue);font-size:clamp(1.4rem,3.5vw,2rem);margin-bottom:var(--spacing-sm);line-height:1.4;font-weight:700}.article-meta{font-size:.85em;color:var(--text-light);display:flex;gap:var(--spacing-md);flex-wrap:wrap}.article-content{font-size:1em;line-height:1.9;margin-bottom:var(--spacing-xxl)}.article-content p{margin-bottom:var(--spacing-lg)}.recommendations-section{margin-top:var(--spacing-xl);padding-top:var(--spacing-xl);border-top:2px solid var(--border-light)}.recommendations-header{margin-bottom:var(--spacing-lg)}.recommendations-header h2{color:var(--primary-blue);font-size:clamp(1.2rem,3vw,1.6rem);margin-bottom:var(--spacing-sm)}.recommendations-meta{font-size:.85em;color:var(--text-light)}.book-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.book-item{background:var(--bg-white);border:1px solid var(--border-light);border-radius:16px;padding:var(--spacing-md);transition:all .18s ease;cursor:pointer;display:flex;gap:var(--spacing-md);text-decoration:none;color:inherit}.book-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--primary-blue)}.book-rank{flex-shrink:0;width:46px;height:46px;background:linear-gradient(135deg,var(--primary-blue),var(--primary-light));color:#fff;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:1.1em;font-weight:700}.book-rank.top3{background:linear-gradient(135deg,gold,orange);box-shadow:0 0 14px #ffd70059}.book-image{flex-shrink:0;width:90px}.book-image img{width:100%;height:135px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow-sm)}.book-content{flex-grow:1;min-width:0}.book-category{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.7em;font-weight:700;margin-bottom:var(--spacing-xs);background:var(--accent-gold);color:var(--primary-dark)}.book-title{color:var(--primary-blue);font-size:clamp(1rem,2.4vw,1.15rem);margin-bottom:4px;font-weight:600}.book-author{color:var(--text-gray);margin-bottom:6px;font-size:.85em}.book-meta{display:flex;gap:var(--spacing-md);font-size:.75em;color:var(--text-light);flex-wrap:wrap}.book-rating{color:var(--accent-orange);font-weight:600}.book-point{color:var(--text-gray);font-size:.8em;margin-top:4px;font-style:italic}.news-source{margin-top:var(--spacing-xl);padding-top:var(--spacing-md);border-top:1px solid var(--border-light);font-size:.8em;color:var(--text-light)}.news-source a{color:var(--primary-blue);text-decoration:none}.news-source a:hover{text-decoration:underline}.share-section{margin-top:var(--spacing-xl);padding-top:var(--spacing-xl);border-top:2px solid var(--border-light)}.share-section h3{color:var(--primary-blue);font-size:1rem;margin-bottom:var(--spacing-md);font-weight:600}.share-buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.share-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;font-size:.85em;font-weight:600;text-decoration:none;color:#fff;transition:all .2s ease;min-width:80px}.share-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.share-btn.x{background:#000}.share-btn.line{background:#00b900}.share-btn.hatena{background:#00a4de}.share-btn.facebook{background:#1877f2}.share-btn.threads{background:#000}.share-btn.bluesky{background:#0085ff}.share-btn.pocket{background:#ef3f56}.share-btn.copy-link{background:#6b7280;border:none;cursor:pointer;font-family:inherit}.share-btn.copy-link:hover{background:#4b5563}.copy-toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%) translateY(100px);background:#000000d9;color:#fff;padding:12px 24px;border-radius:8px;font-size:.9em;font-weight:500;opacity:0;visibility:hidden;transition:all .3s ease;z-index:1000}.copy-toast.show{transform:translate(-50%) translateY(0);opacity:1;visibility:visible}.version-toggle{margin-top:var(--spacing-lg);text-align:center}.version-toggle a{display:inline-block;padding:10px 20px;background:var(--bg-gray-light);color:var(--primary-blue);text-decoration:none;border-radius:999px;font-size:.9em;transition:all .2s ease}.version-toggle a:hover{background:var(--primary-blue);color:#fff}.article-nav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--border-light)}.article-nav a{color:var(--primary-blue);text-decoration:none;font-size:.9em;padding:8px 16px;border-radius:8px;transition:all .2s ease}.article-nav a:hover{background:var(--bg-gray-light)}.article-nav .back-to-home,.back-to-home,.article-nav .prev-article{display:inline-block;margin-top:var(--spacing-lg);padding:12px 24px;background:var(--primary-blue);color:#fff!important;text-decoration:none;border-radius:999px;font-size:.9em;transition:all .2s ease}.article-nav .back-to-home:hover,.back-to-home:hover,.article-nav .prev-article:hover{background:var(--primary-light);color:#fff!important;transform:translateY(-2px);box-shadow:var(--shadow-md)}@media(max-width:1024px){.page-shell,.article-container{padding:var(--spacing-lg)}}@media(max-width:768px){.page-shell{padding:var(--spacing-md) var(--spacing-sm) var(--spacing-xl)}.article-container{border-radius:16px;box-shadow:0 8px 20px #0000001f;padding:var(--spacing-md)}.article-title{font-size:clamp(1.2rem,4.2vw,1.5rem)}.book-item{flex-direction:row;align-items:flex-start;padding:var(--spacing-md)}.book-image{width:70px}.book-image img{height:110px}.book-rank{width:40px;height:40px;font-size:1em}.book-meta{font-size:.72em}.share-buttons{justify-content:center}.share-btn{padding:8px 12px;font-size:.8em;min-width:70px}}@media(max-width:400px){.book-item{position:relative;padding:12px;gap:12px}.book-image{width:100px}.book-image img{height:150px}.book-rank{position:absolute;top:10px;left:16px;z-index:5;width:32px;height:32px;font-size:.85em;box-shadow:0 2px 6px #00000040}.book-rank.top3{width:34px;height:34px}.share-btn{flex:1 1 calc(50% - var(--spacing-sm));min-width:unset}}ruby{ruby-align:center}ruby rt{font-size:.5em;color:var(--text-gray);font-weight:400}.article-title ruby rt{font-size:.45em}.article-content ruby rt{font-size:.55em;color:var(--text-light)}.book-title ruby rt{font-size:.5em}.learning-mode-badge{display:inline-block;background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;padding:4px 12px;border-radius:999px;font-size:.75em;font-weight:700;margin-left:var(--spacing-sm);vertical-align:middle}.ruby-header-note{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border:1px solid #FFB74D;border-radius:12px;padding:var(--spacing-md);margin-bottom:var(--spacing-lg);font-size:.9em;color:#e65100}.ruby-header-note:before{content:"📖 "}.article-content{line-height:2.2}.article-title{line-height:1.6}.article-content p:hover ruby rt{color:var(--primary-blue)}.version-toggle .current{background:var(--primary-blue);color:#fff;cursor:default}.version-toggle .current:hover{transform:none;box-shadow:none}@media(max-width:768px){ruby rt{font-size:.45em}.article-content{line-height:2.4}.article-content ruby rt{font-size:.5em}.learning-mode-badge{display:block;margin-left:0;margin-top:var(--spacing-sm);text-align:center}}.version-toggle{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.version-toggle a{display:inline-flex;align-items:center;padding:10px 16px;border-radius:8px;text-decoration:none;font-size:.95rem;transition:all .2s ease}.version-toggle .game-link{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.version-toggle .game-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}@media print{ruby rt{display:none}.learning-mode-badge,.ruby-header-note{display:none}}