*,:before,:after{box-sizing:border-box}body{margin:0}*{box-sizing:border-box;margin:0;padding:0}body{color:#1a1a1a;-webkit-font-smoothing:antialiased;background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#root{max-width:100%}.app{max-width:720px;min-height:100svh;margin:0 auto;padding:12px 16px 40px}.search-area{margin-bottom:12px;position:relative}.search-box{background:#fff;border:1.5px solid #e5e7eb;border-radius:12px;align-items:center;gap:8px;padding:12px 14px;display:flex;box-shadow:0 1px 4px #0000000f}.search-icon{flex-shrink:0;font-size:16px}.search-input{color:#111;background:0 0;border:none;outline:none;flex:1;font-size:15px}.search-input::placeholder{color:#aaa}.clear-btn{cursor:pointer;color:#aaa;background:0 0;border:none;padding:2px 4px;font-size:14px}.clear-btn:hover{color:#555}.dropdown{z-index:100;background:#fff;border:1.5px solid #e5e7eb;border-radius:12px;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden;box-shadow:0 8px 24px #0000001a}.dropdown-item{cursor:pointer;align-items:center;gap:8px;padding:12px 16px;transition:background .1s;display:flex}.dropdown-item:hover:not(.already){background:#f5f5f5}.dropdown-item.already{opacity:.5;cursor:default}.region-name{flex:1;font-size:14px;font-weight:500}.region-type{color:#888;background:#f3f4f6;border-radius:4px;padding:2px 6px;font-size:11px}.already-label{color:#4ade80;font-size:11px;font-weight:600}.no-result{text-align:center;color:#999;padding:16px;font-size:14px}.chips{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.chip{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:500;display:inline-flex}.chip-name{cursor:pointer;color:inherit;font-size:inherit;font-weight:inherit;background:0 0;border:none;padding:0}.chip-name:hover{text-decoration:underline}.region-th-btn,.single-title-btn{cursor:pointer;color:inherit;font:inherit;text-align:inherit;background:0 0;border:none;padding:0}.region-th-btn:hover,.single-title-btn:hover{color:#3182f6;text-decoration:underline}.chip-remove{cursor:pointer;color:#93c5fd;background:0 0;border:none;justify-content:center;align-items:center;min-width:32px;min-height:32px;margin:-4px -6px -4px 2px;padding:4px 6px;font-size:14px;display:flex}.chip-remove:hover{color:#1d4ed8}.empty{text-align:center;color:#999;padding:60px 0}.empty-icon{margin-bottom:16px;font-size:48px}.empty p{margin-bottom:4px;font-size:15px}.empty-sub{font-size:13px}.single-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 1px 4px #0000000f}.single-title{margin-bottom:4px;font-size:20px;font-weight:700}.single-hint{color:#999;margin-bottom:20px;font-size:13px}.single-grades{flex-direction:column;gap:12px;display:flex}.single-row{align-items:center;gap:12px;display:flex}.single-cat{color:#555;flex-shrink:0;width:60px;font-size:13px}.compare-section{margin-top:4px}.compare-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.compare-table{border-collapse:collapse;table-layout:fixed;background:#fff;border-radius:16px;width:100%;overflow:hidden;box-shadow:0 1px 4px #0000000f}.compare-table th,.compare-table td{text-align:left;border-bottom:1px solid #f3f4f6;padding:10px}.compare-table tr:last-child td{border-bottom:none}.compare-table thead{background:#f9fafb}.cat-col{width:52px}.region-col{color:#111;font-size:12px;font-weight:600}.region-th-name{white-space:nowrap;text-overflow:ellipsis;margin-bottom:3px;display:block;overflow:hidden}.avg-badge{display:none}.rank-badge{color:#6366f1;white-space:nowrap;background:#eef2ff;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:600;display:inline-block}.cat-cell{vertical-align:middle}.cat-short{color:#444;white-space:nowrap;font-size:12px;font-weight:500;display:block}.cat-full{display:none}.grade-cell{vertical-align:middle}.grade-badge{color:#fff;text-shadow:0 1px 2px #00000026;border-radius:6px;margin-bottom:4px;padding:2px 7px;font-size:11px;font-weight:700;display:inline-block}.grade-bar-wrap{align-items:center;gap:6px;height:6px;display:flex}.grade-bar{border-radius:3px;height:6px;transition:width .3s}.grade-bar-num{color:#bbb;font-size:11px}.cat-rank{color:#bbb;margin-top:3px;font-size:10px;display:block}.note{color:#bbb;text-align:center;margin-top:10px;font-size:11px}.share-btn{color:#fff;cursor:pointer;background:#3182f6;border:none;border-radius:10px;align-items:center;gap:6px;margin-bottom:10px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .15s;display:inline-flex;box-shadow:0 2px 8px #3182f640}.share-btn:hover{background:#2872e0;transform:translateY(-1px);box-shadow:0 4px 12px #3182f659}.share-btn:active{background:#1d63cf;transform:translateY(0)}.drill-toggle{color:#444;cursor:pointer;background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;justify-content:center;align-items:center;gap:6px;width:100%;margin-bottom:8px;padding:10px 16px;font-size:14px;font-weight:500;transition:background .15s,color .15s;display:flex}.drill-toggle:hover:not(:disabled){background:#f5f5f5}.drill-toggle--on{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.drill-toggle:disabled{opacity:.4;cursor:default}.drilldown{background:#fff;border:1.5px solid #e5e7eb;border-radius:14px;margin-bottom:16px;padding:16px}.drilldown-hint{color:#aaa;margin-bottom:12px;font-size:12px}.sido-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.sido-btn{color:#333;cursor:pointer;background:#f8f9fa;border:1.5px solid #e5e7eb;border-radius:8px;padding:10px 4px;font-size:14px;font-weight:600;transition:all .15s}.sido-btn:hover:not(:disabled){color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.sido-btn:disabled{opacity:.4;cursor:default}.back-btn{cursor:pointer;color:#1d4ed8;background:0 0;border:none;padding:0 0 12px;font-size:14px;font-weight:600;display:block}.back-btn:hover{text-decoration:underline}.sub-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.sub-btn{color:#333;cursor:pointer;background:#f8f9fa;border:1.5px solid #e5e7eb;border-radius:8px;justify-content:center;align-items:center;gap:4px;padding:10px 8px;font-size:13px;font-weight:500;transition:all .15s;display:flex;position:relative}.sub-btn:hover:not(:disabled){color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.sub-btn--selected{color:#166534;cursor:default;background:#dcfce7;border-color:#86efac}.sub-btn:disabled:not(.sub-btn--selected){opacity:.4;cursor:default}.sub-btn-badge{color:#4338ca;background:#e0e7ff;border-radius:4px;padding:1px 4px;font-size:10px;font-weight:600}.fav-bar{scrollbar-width:none;align-items:center;gap:8px;padding:8px 0;display:flex;overflow-x:auto}.fav-bar::-webkit-scrollbar{display:none}.fav-bar-label{color:#888;white-space:nowrap;flex-shrink:0;font-size:11px}.fav-chip{color:#92400e;white-space:nowrap;cursor:pointer;background:#fffbeb;border:1.5px solid #fde68a;border-radius:20px;flex-shrink:0;padding:4px 10px;font-size:12px;font-weight:600;transition:background .1s}.fav-chip:hover{background:#fef3c7}.fav-earn-btn{color:#6b7280;white-space:nowrap;cursor:pointer;background:0 0;border:1.5px dashed #d1d5db;border-radius:20px;flex-shrink:0;padding:4px 10px;font-size:11px}.fav-earn-btn:hover{color:#3182f6;border-color:#3182f6}.fav-star{cursor:pointer;color:#d1d5db;background:0 0;border:none;margin-left:auto;padding:0 4px;font-size:16px;line-height:1;transition:color .1s}.fav-star:hover,.fav-star--on{color:#f59e0b}.ad-placeholder{color:#999;letter-spacing:.08em;background:repeating-linear-gradient(45deg,#f0f0f0,#f0f0f0 8px,#e0e0e0 8px 16px);border-radius:8px;justify-content:center;align-items:center;width:100%;min-height:64px;margin:12px 0;font-size:11px;font-weight:600;display:flex}.ad-banner{width:100%;min-height:64px;margin:12px 0}.onb-root{background:linear-gradient(#eff6ff 0%,#f8f9fa 50%);justify-content:center;align-items:stretch;min-height:100svh;padding:16px;display:flex}.onb-card{background:#fff;border-radius:20px;align-self:center;width:100%;max-width:480px;padding:32px 24px;box-shadow:0 4px 24px #3182f614}.onb-header{text-align:center;margin-bottom:32px}.onb-title{color:#111;margin-bottom:4px;font-size:24px;font-weight:700}.onb-sub{color:#6b7280;margin-bottom:16px;font-size:13px}.onb-progress{justify-content:center;gap:6px;display:flex}.onb-dot{background:#e5e7eb;border-radius:2px;width:24px;height:4px;transition:background .2s}.onb-dot--on{background:#3182f6}.onb-step-title{color:#111;margin-bottom:6px;font-size:18px;font-weight:700}.onb-step-sub{color:#6b7280;margin-bottom:20px;font-size:13px}.onb-picker{position:relative}.onb-selected{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.onb-chip{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;align-items:center;gap:8px;padding:8px 14px;font-size:14px;font-weight:600;display:inline-flex}.onb-chip--home{color:#92400e;background:#fffbeb;border-color:#fde68a}.onb-chip button{cursor:pointer;color:inherit;opacity:.7;background:0 0;border:none;padding:0 0 0 4px;font-size:12px}.onb-chip button:hover{opacity:1}.onb-actions{gap:8px;margin-top:32px;display:flex}.onb-btn{cursor:pointer;border:1.5px solid #0000;border-radius:10px;flex:1;padding:14px;font-size:14px;font-weight:700;transition:all .15s}.onb-btn--primary{color:#fff;background:#3182f6}.onb-btn--primary:hover:not(:disabled){background:#2872e0}.onb-btn--primary:disabled{cursor:not-allowed;background:#d1d5db}.onb-btn--ghost{color:#6b7280;background:#fff;border-color:#e5e7eb}.onb-btn--ghost:hover{color:#374151;border-color:#9ca3af}.app{padding-bottom:72px}.bottom-tabs{-webkit-backdrop-filter:blur(12px);margin-bottom:calc(env(safe-area-inset-bottom,0px) + 6px);z-index:100;background:#ffffffb8;border-radius:24px;gap:4px;padding:4px 8px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 2px 16px #0000001a}.tab-btn{cursor:pointer;color:#9ca3af;background:0 0;border:none;border-radius:20px;flex-direction:column;align-items:center;gap:1px;min-height:36px;padding:6px 16px;transition:color .15s,background .15s;display:flex}.tab-btn--active{color:#3182f6;background:#3182f61a}.tab-icon{font-size:16px;line-height:1}.tab-label{letter-spacing:-.2px;font-size:9px;font-weight:600}.bottom-tabs--hidden{opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;transform:translate(-50%)translateY(20px)}.ranking-page{padding:8px 0 12px}.ranking-title{color:#111;margin-bottom:4px;font-size:20px;font-weight:700}.ranking-sub{color:#888;margin-bottom:16px;font-size:12px}.ranking-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px;display:grid}.rank-card{text-align:left;cursor:pointer;background:#fff;border:1.5px solid #e5e7eb;border-radius:14px;flex-direction:column;gap:8px;padding:14px 12px;transition:border-color .15s,transform .1s;display:flex}.rank-card:hover{border-color:#3182f6}.rank-card:active{transform:scale(.98)}.rank-card-head{align-items:center;gap:6px;display:flex}.rank-card-icon{font-size:18px}.rank-card-title{color:#1a1a1a;font-size:14px;font-weight:700}.rank-card-list{flex-direction:column;gap:4px;list-style:none;display:flex}.rank-card-list li{color:#374151;align-items:center;gap:6px;font-size:12px;display:flex}.rank-card-medal{flex-shrink:0;font-size:14px;line-height:1}.rank-card-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.rank-card-grade{color:#6b7280;background:#f3f4f6;border-radius:4px;padding:1px 6px;font-size:11px;font-weight:600}.rank-card-more{color:#3182f6;margin-top:auto;font-size:11px;font-weight:600}.ranking-detail{padding:8px 0 12px}.ranking-detail-head{align-items:center;gap:8px;margin-bottom:4px;display:flex}.back-btn{cursor:pointer;color:#3182f6;background:0 0;border:none;padding:4px 0;font-size:14px;font-weight:600}.ranking-detail-title{color:#111;font-size:18px;font-weight:700}.ranking-detail-sub{color:#888;margin-bottom:16px;font-size:12px}.rank-section{margin-bottom:20px}.rank-section-title{color:#6b7280;margin-bottom:8px;padding-left:4px;font-size:13px;font-weight:700}.rank-list{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}.rank-row{cursor:pointer;text-align:left;background:0 0;border:none;border-bottom:1px solid #f3f4f6;align-items:center;gap:12px;width:100%;padding:12px 14px;transition:background .1s;display:flex}.rank-row:last-child{border-bottom:none}.rank-row:hover{background:#f9fafb}.rank-row:active{background:#f3f4f6}.rank-row--mine{background:#fffbeb}.rank-row--mine:hover{background:#fef3c7}.rank-medal{text-align:center;flex-shrink:0;width:28px;font-size:20px}.rank-num{color:#9ca3af;text-align:center;flex-shrink:0;width:28px;font-size:13px;font-weight:700}.rank-name{color:#1a1a1a;flex:1;font-size:14px;font-weight:600}.rank-grade{color:#3182f6;background:#eff6ff;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:600}.rank-expand-btn{color:#3182f6;cursor:pointer;background:0 0;border:1.5px dashed #d1d5db;border-radius:10px;width:100%;margin-top:8px;padding:10px;font-size:13px;font-weight:600;transition:all .15s}.rank-expand-btn:hover{background:#eff6ff;border-color:#3182f6}.rank-list--compact .rank-row{padding:10px 14px}.modal-backdrop{z-index:100;background:#00000080;justify-content:center;align-items:flex-end;animation:.15s ease-out fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal-sheet{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:720px;max-height:85vh;padding:24px 20px 32px;animation:.2s ease-out slide-up;position:relative;overflow-y:auto}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-close{cursor:pointer;color:#9ca3af;background:0 0;border:none;padding:8px;font-size:18px;line-height:1;position:absolute;top:16px;right:16px}.modal-head{margin-bottom:20px;padding-right:32px}.modal-title{color:#111;margin-bottom:8px;font-size:22px;font-weight:700}.modal-meta{flex-wrap:wrap;gap:8px;display:flex}.modal-meta-item{color:#4b5563;background:#f3f4f6;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600}.modal-grades{background:#f9fafb;border-radius:12px;flex-direction:column;gap:10px;margin-bottom:20px;padding:14px;display:flex}.modal-grade-row{grid-template-columns:60px auto 1fr auto;align-items:center;gap:10px;display:grid}.modal-grade-cat{color:#374151;font-size:13px;font-weight:600}.modal-grade-rank{color:#6b7280;white-space:nowrap;font-size:11px}.modal-actions{gap:8px;display:flex}.modal-btn{cursor:pointer;border:1.5px solid #0000;border-radius:10px;flex:1;padding:14px 12px;font-size:14px;font-weight:600;transition:all .15s}.modal-btn--primary{color:#fff;background:#3182f6}.modal-btn--primary:hover:not(:disabled){background:#2872e0}.modal-btn--primary:disabled{cursor:not-allowed;background:#d1d5db}.modal-btn--fav{color:#6b7280;background:#fff;border-color:#e5e7eb}.modal-btn--fav:hover{color:#f59e0b;border-color:#f59e0b}.modal-btn--fav-on{color:#92400e;background:#fffbeb;border-color:#fde68a}