:root,[data-theme=light]{--color-bg:#fafafa;--color-surface:#fff;--color-border:#e2e0dc;--color-text:#1a1a1a;--color-text-secondary:#5c5c5c;--color-text-muted:#6b6b6b;--color-primary:#c0392b;--color-primary-light:#e74c3c;--color-primary-bg:#fdf2f0;--color-accent:#d35400;--color-hover:#f5f0eb;--color-stripe:#f9f7f4;--color-shadow:#00000014;--color-n5:#27ae60;--color-n5-bg:#eafaf1;--color-n4:#2980b9;--color-n4-bg:#ebf5fb;--color-n3:#e67e22;--color-n3-bg:#fef5e7;--color-n2:#c0392b;--color-n2-bg:#fdedec;--color-n1:#8e44ad;--color-n1-bg:#f4ecf7;--radius:8px;--radius-sm:4px;--radius-lg:12px;--shadow-sm:0 1px 3px var(--color-shadow);--shadow-md:0 4px 12px var(--color-shadow);--shadow-lg:0 8px 30px #0000001f;--transition:.2s ease;--color-highlight-bg:#fff3cd;--color-highlight-text:#1a1a1a }[data-theme=dark]{--color-bg:#1a1a1a;--color-surface:#2a2a2a;--color-border:#3a3a3a;--color-text:#e8e6e3;--color-text-secondary:#b0b0b0;--color-text-muted:#999;--color-primary:#e74c3c;--color-primary-light:#ff6b6b;--color-primary-bg:#3d1f1c;--color-accent:#e67e22;--color-hover:#333;--color-stripe:#242424;--color-shadow:#0000004d;--color-n5-bg:#1a3a2a;--color-n4-bg:#1a2a3a;--color-n3-bg:#3a2a1a;--color-n2-bg:#3a1a1a;--color-n1-bg:#2a1a3a;--shadow-sm:0 1px 3px var(--color-shadow);--shadow-md:0 4px 12px var(--color-shadow);--shadow-lg:0 8px 30px #0006;--color-highlight-bg:#5a4a20;--color-highlight-text:#f0e6c0 }*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}body{background-color:var(--color-bg);color:var(--color-text);flex-direction:column;min-height:100vh;font-family:Noto Sans JP,Noto Sans SC,Hiragino Sans,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.7;transition:background-color .3s,color .3s;display:flex}main{flex:1}a{color:var(--color-primary);transition:color var(--transition);text-decoration:none}a:hover{color:var(--color-primary-light)}img{max-width:100%;height:auto}.skip-link{background:var(--color-primary);color:#fff;z-index:10000;padding:.5rem 1rem;font-size:.875rem;position:absolute;top:-100%;left:0}.skip-link:focus{top:0}mark{background:var(--color-highlight-bg);color:var(--color-highlight-text);border-radius:2px;padding:0 2px;font-weight:700}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.site-header{background:var(--color-surface);border-bottom:2px solid var(--color-border);z-index:100;box-shadow:var(--shadow-sm);padding:1rem 1.5rem;transition:background-color .3s,border-color .3s;position:sticky;top:0}.site-header-inner{justify-content:space-between;align-items:center;gap:1rem;max-width:1400px;margin:0 auto;display:flex}.site-title{color:var(--color-text);white-space:nowrap;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:600;display:flex}.site-title .kanji-accent{color:var(--color-primary);font-weight:700}.header-back{color:var(--color-text-secondary);align-items:center;gap:.25rem;font-size:.875rem;display:flex}.header-back:hover{color:var(--color-primary)}.help-btn,.dark-mode-btn{background:var(--color-hover);color:var(--color-text);border:1px solid var(--color-border);border-radius:50%;cursor:pointer;width:36px;height:36px;font-size:1.1rem;transition:all var(--transition);justify-content:center;align-items:center;display:flex}.help-btn:hover,.dark-mode-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.container{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.home-hero{text-align:center;margin-bottom:3rem}.home-hero h1{color:var(--color-text);margin-bottom:.5rem;font-size:2.25rem;font-weight:700}.home-hero p{color:var(--color-text-secondary);font-size:1rem}.home-search-box{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);max-width:600px;margin:1.5rem auto 0;padding:.75rem 1rem;position:relative;transition:border-color var(--transition)}.home-search-box:focus-within{border-color:var(--color-primary)}.home-search-box .search-icon{color:var(--color-text-muted);position:absolute;left:1.25rem;top:50%;transform:translateY(-50%)}.home-search-box input{background:transparent;border:none;outline:none;width:100%;padding-left:2rem;font-size:1rem;font-family:inherit;color:var(--color-text)}.home-search-results{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-lg);text-align:left;z-index:1000;max-height:400px;overflow-y:auto;display:none;position:absolute;top:calc(100% + .5rem);left:0;right:0}.search-group{padding:.5rem 0;border-bottom:1px solid var(--color-border)}.search-group:last-child{border-bottom:none}.search-group-title{padding:.25rem 1rem;color:var(--color-text-secondary);font-size:.75rem;font-weight:600;text-transform:uppercase}.search-item{padding:.5rem 1rem;color:var(--color-text);font-size:.9rem;display:block}.search-item:hover{background:var(--color-hover);color:var(--color-primary)}.search-empty{padding:1.5rem;text-align:center;color:var(--color-text-muted);font-size:.9rem}.home-section-title{color:var(--color-text);margin:2rem 0 1rem;font-size:1.25rem;font-weight:600;position:relative;padding-left:.75rem}.home-section-title:before{content:"";background:var(--color-primary);border-radius:2px;width:4px;height:1.1em;position:absolute;left:0;top:50%;transform:translateY(-50%)}.home-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;display:grid}.home-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.25rem;color:var(--color-text);transition:all var(--transition);display:block}.home-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.home-card-title{color:var(--color-primary);margin-bottom:.5rem;font-size:1.05rem;font-weight:600}.home-card-desc{color:var(--color-text-secondary);font-size:.875rem}.section-header{margin-bottom:1.5rem}.section-header h1{color:var(--color-text);margin-bottom:.25rem;font-size:1.75rem;font-weight:700}.section-header .subtitle{color:var(--color-text-secondary);font-size:.9rem}.toolbar{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);gap:.75rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem;padding:.75rem 1rem;display:flex}.toolbar select,.toolbar input{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.5rem .75rem;font-size:.875rem;font-family:inherit;color:var(--color-text)}.toolbar input[type=search]{min-width:240px;flex:1}.toolbar select:focus,.toolbar input:focus{outline:none;border-color:var(--color-primary)}.stats-bar{color:var(--color-text-muted);margin-bottom:.75rem;font-size:.82rem}.data-table{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);width:100%;border-collapse:collapse;overflow:hidden}.data-table th{background:var(--color-hover);color:var(--color-text);padding:.75rem 1rem;font-size:.82rem;font-weight:600;text-align:left;border-bottom:2px solid var(--color-border)}.data-table td{padding:.75rem 1rem;font-size:.9rem;border-bottom:1px solid var(--color-border);vertical-align:top}.data-table tr:nth-child(2n) td{background:var(--color-stripe)}.data-table tr:hover td{background:var(--color-hover)}.kanji-table td:first-child{font-size:1.5rem;font-weight:600;color:var(--color-primary);min-width:80px}.level-N5{color:var(--color-n5);background:var(--color-n5-bg);border-radius:3px;padding:.15rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}.level-N4{color:var(--color-n4);background:var(--color-n4-bg);border-radius:3px;padding:.15rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}.level-N3{color:var(--color-n3);background:var(--color-n3-bg);border-radius:3px;padding:.15rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}.level-N2{color:var(--color-n2);background:var(--color-n2-bg);border-radius:3px;padding:.15rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}.level-N1{color:var(--color-n1);background:var(--color-n1-bg);border-radius:3px;padding:.15rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}.audio-btn{background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;padding:.25rem .6rem;font-size:.75rem;font-family:inherit;transition:opacity .2s}.audio-btn:hover{opacity:.85}.thumb{color:var(--color-primary);font-size:.82rem;text-decoration:underline}.empty-state{text-align:center;color:var(--color-text-muted);padding:3rem 1rem;font-size:.95rem}.empty-icon{font-size:3rem;margin-bottom:.5rem}.loading{text-align:center;color:var(--color-text-secondary);padding:3rem 1rem}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:36px;height:36px;margin:0 auto 1rem;animation:spin .8s linear infinite}.pagination{justify-content:center;flex-wrap:wrap;gap:.25rem;margin-top:1.5rem;display:flex}.page-btn{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;min-width:36px;padding:.4rem .7rem;font-size:.875rem;font-family:inherit;transition:all var(--transition)}.page-btn:hover{background:var(--color-hover);border-color:var(--color-primary)}.page-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.dual-search{grid-template-columns:1fr 1fr auto;gap:.75rem;align-items:center;margin-bottom:1rem;display:grid}.search-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);align-items:center;gap:.5rem;padding:.5rem .75rem;display:flex;position:relative}.search-box .label{color:var(--color-text-muted);font-size:.75rem;font-weight:600}.search-box .search-icon{color:var(--color-text-muted)}.search-box input{background:transparent;border:none;outline:none;width:100%;font-size:.9rem;font-family:inherit;color:var(--color-text)}.jump-box{align-items:center;gap:.5rem;display:flex}.jump-box label{color:var(--color-text-muted);font-size:.82rem;white-space:nowrap}.jump-box input{width:80px}.jump-btn{background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;padding:.5rem 1rem;font-size:.875rem;font-family:inherit;transition:opacity .2s}.jump-btn:hover{opacity:.85}.site-footer{color:var(--color-text-muted);text-align:center;border-top:1px solid var(--color-border);padding:1.5rem;font-size:.82rem;line-height:1.8}.help-modal-overlay{background:#00000080;justify-content:center;align-items:center;z-index:9999;padding:1rem;display:none;position:fixed;inset:0}.help-modal-overlay.active{display:flex}.help-modal{background:var(--color-surface);border-radius:var(--radius-lg);max-width:720px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.help-modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.help-modal-title{color:var(--color-text);font-size:1.15rem;font-weight:600}.help-modal-close{background:none;border:none;cursor:pointer;color:var(--color-text-muted);font-size:1.5rem;line-height:1}.help-modal-body{padding:1.5rem;overflow-y:auto;line-height:1.8}.help-modal-body h2{color:var(--color-primary);margin:1.25rem 0 .5rem;font-size:1.05rem;font-weight:600}.help-modal-body h2:first-child{margin-top:0}.help-modal-body h3{color:var(--color-text);margin:1rem 0 .35rem;font-size:.95rem;font-weight:600}.help-modal-body p{color:var(--color-text);margin-bottom:.5rem;font-size:.9rem}.help-modal-body ul{color:var(--color-text);padding-left:1.25rem;margin-bottom:.5rem;font-size:.9rem}.help-modal-body li{margin-bottom:.25rem}.help-modal-body .kbd{background:var(--color-hover);border:1px solid var(--color-border);border-radius:3px;padding:.1rem .4rem;font-size:.8rem;font-family:monospace}.help-modal-body a{color:var(--color-primary);text-decoration:underline}.help-footer-note{color:var(--color-text-muted);text-align:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--color-border);font-size:.82rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[data-toast]{position:fixed;top:2rem;left:50%;transform:translate(-50%);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:99999;padding:.75rem 1.25rem;font-size:.875rem;animation:fadeInUp .25s ease}@media(max-width:640px){.home-grid,.dual-search{grid-template-columns:1fr}.toolbar{flex-direction:column;align-items:stretch}}