/* ==========================================================================
   Top 3 Finalists — extends new_theme_design.css + categories_new_theme.css
   ========================================================================== */

.tn-note {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--cream); border: 1px solid var(--line-soft); border-radius: 12px;
    padding: 16px 20px; margin: 30px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.6;
}
.tn-note .ico { font-size: 18px; flex: none; margin-top: -1px; }
.tn-note b { color: var(--navy); }

.top3-list { margin-top: 10px; }
.top3-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1px dashed var(--line-soft);
    font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.top3-item:last-child { border-bottom: none; }
.top3-item .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.top3-empty { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 10px; }

.tn-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.tn-region-tabs { display: flex; gap: 8px; margin-top: 28px; border-bottom: 1px solid var(--line-soft); }
.tn-region-tab {
    font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--muted);
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 10px 4px; margin-bottom: -1px; cursor: pointer; transition: color .2s, border-color .2s;
}
.tn-region-tab:hover { color: var(--navy); }
.tn-region-tab.active { color: var(--crimson); border-bottom-color: var(--gold); }

.tn-region-panel { display: none; }
.tn-region-panel.active { display: block; }