.app-container{max-width:1200px;margin:0 auto;padding:36px 20px 56px}.page-header{margin-bottom:20px}.page-title{color:#111827;margin:0 0 8px;font-size:34px;font-weight:800;line-height:1.2}.page-description{color:#6b7280;margin:0;font-size:15px}.tab-group{flex-wrap:wrap;gap:10px;margin-bottom:24px;display:flex}.tab-button{color:#374151;cursor:pointer;background-color:#e5e7eb;border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:700;transition:transform .15s,background-color .2s,color .2s,box-shadow .2s}.tab-button:hover{transform:translateY(-1px)}.tab-melon{color:#1b7f43;background-color:#eef8f1}.tab-genie{color:#2563eb;background-color:#eef4ff}.tab-bugs{color:#ea580c;background-color:#fff4e8}.tab-melon.active{color:#fff;background-color:#1db954;box-shadow:0 6px 14px #1db95438}.tab-genie.active{color:#fff;background-color:#2563eb;box-shadow:0 6px 14px #2563eb38}.tab-bugs.active{color:#fff;background-color:#f97316;box-shadow:0 6px 14px #f9731638}.status-box{border-radius:10px;margin-bottom:20px;padding:12px 14px;font-size:14px;font-weight:500}.status-box.loading{color:#1565c0;background-color:#eef6ff}.status-box.error{color:#c62828;background-color:#ffe5e5}.meta-card{background-color:#fff;border:1px solid #e5e7eb;border-radius:16px;margin-bottom:26px;padding:20px 18px;box-shadow:0 4px 12px #0f172a0a}.meta-card p{color:#111827;margin:0 0 10px;font-size:15px}.meta-card p:last-child{margin-bottom:0}.chart-grid{grid-template-columns:1fr 1fr;gap:10px 20px;display:grid}.song-item{background-color:#fff;border:1px solid #eceff3;border-radius:14px;align-items:center;gap:14px;padding:12px;transition:transform .15s,box-shadow .2s;display:flex;box-shadow:0 4px 10px #0f172a08}.song-item:hover{transform:translateY(-1px);box-shadow:0 6px 12px #0f172a0f}.song-rank{text-align:center;color:#374151;flex-shrink:0;width:34px;font-size:16px;font-weight:800}.song-image{object-fit:cover;background-color:#f3f4f6;border:1px solid #e5e7eb;border-radius:10px;flex-shrink:0;width:58px;height:58px}.song-info{min-width:0}.song-title{color:#111827;word-break:keep-all;margin-bottom:3px;font-size:15px;font-weight:700;line-height:1.35}.song-artist{color:#6b7280;word-break:keep-all;font-size:13px;font-weight:400;line-height:1.4}.section-title{color:#111827;margin:0 0 14px;font-size:22px;font-weight:800}.control-card{background-color:#fff;border:1px solid #e5e7eb;border-radius:16px;margin-bottom:24px;padding:18px;box-shadow:0 4px 12px #0f172a0a}.control-row{flex-wrap:wrap;align-items:end;gap:18px;display:flex}.control-group{flex-direction:column;flex:1;gap:10px;min-width:240px;display:flex}.control-label{color:#374151;font-size:14px;font-weight:700}.search-input{color:#111827;background-color:#fff;border:1px solid #d1d5db;border-radius:12px;outline:none;width:100%;padding:12px 14px;transition:border-color .2s,box-shadow .2s}.search-input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb14}.count-filter-group{flex-wrap:wrap;gap:10px;display:flex}.count-button{color:#374151;cursor:pointer;background-color:#eef2f7;border:none;border-radius:10px;padding:10px 14px;font-size:14px;font-weight:700;transition:transform .15s,background-color .2s,color .2s,box-shadow .2s}.count-button:hover{transform:translateY(-1px)}.count-button.active{color:#fff;background-color:#111827;box-shadow:0 6px 14px #11182729}.chart-section{margin-bottom:34px}.chart-count{color:#6b7280;font-size:23px;font-weight:700}.compare-section{margin-top:10px;margin-bottom:40px}.compare-search-row{flex-wrap:wrap;gap:10px;margin-bottom:18px;display:flex}.compare-search-row .search-input{flex:1;min-width:240px}.compare-search-button{color:#fff;cursor:pointer;background-color:#111827;border:none;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:700;transition:transform .15s,box-shadow .2s,opacity .2s}.compare-search-button:hover{transform:translateY(-1px);box-shadow:0 6px 14px #11182729}.compare-result-wrapper{margin-top:8px}.compare-summary{color:#4b5563;margin-bottom:14px;font-size:14px}.compare-list{grid-template-columns:1fr;gap:12px;display:grid}.compare-card{background-color:#fff;border:1px solid #eceff3;border-radius:16px;gap:14px;padding:14px;display:flex;box-shadow:0 4px 10px #0f172a08}.compare-image{object-fit:cover;background-color:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;flex-shrink:0;width:72px;height:72px}.compare-info{flex-direction:column;justify-content:center;min-width:0;display:flex}.compare-rank-row{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.compare-rank-pill{border-radius:999px;align-items:center;padding:6px 10px;font-size:13px;font-weight:700;display:inline-flex}.melon-pill{color:#1b7f43;background-color:#eef8f1}.genie-pill{color:#2563eb;background-color:#eef4ff}.bugs-pill{color:#ea580c;background-color:#fff4e8}.empty-box{color:#6b7280;background-color:#fff;border:1px dashed #d1d5db;border-radius:14px;padding:18px 16px;font-size:14px}.rank-change{font-size:12px;font-weight:600}.rank-change.up{color:#ef4444}.rank-change.down{color:#3b82f6}.rank-change.same{color:#9ca3af}.rank-change.new{color:#22c55e}.chart-summary{margin:24px 0 28px}.artist-chart-card{box-sizing:border-box;background:#fff;border:1px solid #e5e7eb;border-radius:16px;width:100%;padding:16px 20px}.song-title-row{align-items:center;gap:8px;display:flex}@media (width<=768px){.app-container{padding:28px 16px 40px}.page-title{font-size:30px}.chart-grid{grid-template-columns:1fr;gap:10px}.song-item{gap:12px}.song-rank{width:30px;font-size:15px}.song-image{width:54px;height:54px}.song-title{font-size:14px}.song-artist{font-size:12px}.section-title{font-size:20px}.control-card{padding:16px}.compare-card{padding:12px}.compare-image{width:64px;height:64px}}@media (width<=480px){.app-container{padding:22px 12px 32px}.page-title{font-size:26px}.page-description{font-size:14px}.tab-group{gap:8px}.tab-button{padding:9px 14px;font-size:13px}.meta-card{border-radius:14px;padding:16px 14px}.meta-card p{font-size:14px}.song-item{padding:11px}.song-rank{width:28px;font-size:14px}.song-image{width:50px;height:50px}.section-title{font-size:18px}.control-card{border-radius:14px;padding:14px}.search-input{padding:11px 12px;font-size:14px}.compare-search-button{width:100%}.compare-card{gap:12px}.compare-image{width:58px;height:58px}.compare-rank-pill{font-size:12px}}:root{color:#222;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f7f7f7;font-family:Pretendard,Noto Sans KR,Malgun Gothic,Apple SD Gothic Neo,Arial,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{background-color:#f7f7f7;min-width:320px;margin:0}button,input,textarea,select{font:inherit}