/* ===== 나라 탭 + 모집 중인 도시 칩 (components/region_nav.php) =====
   캠페인 목록(/campaigns)과 홈이 같이 쓴다. 좌우 여백은 --region-nav-x 로 맞춘다:
   기본은 홈 섹션과 같은 --container-padding, 목록 페이지는 컨테이너(50px/15px)에 맞춰 덮어쓴다. 2026-11-04 */
.region-nav { --region-nav-x: var(--container-padding, 48px); }

/* --- 나라 탭 (설계안: 납작 + 국기 + 주색 밑줄) --- */
.region-tabs {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0 var(--region-nav-x);
    border-bottom: 1px solid var(--border-light, #eee);
    overflow-x: auto;
}
.region-tabs .region-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 0;
    color: var(--text-color, #333);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s;
}
.region-tabs .region-tab:hover { color: var(--primary); }
.region-tabs .region-tab.active {
    color: var(--primary);
    font-weight: 600;
    border-bottom-color: var(--primary);
}
/* 이름 오른쪽 위 모집 중 건수 배지: 연한 분홍 바탕 + 주색 숫자, 선택된 탭은 주색 바탕 */
.region-tabs .region-tab .cnt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: -2px;
    border-radius: 9px;
    background: var(--primary-light, #ffdae1);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-7px);
}
.region-tabs .region-tab.active .cnt {
    background: var(--primary);
    color: #fff;
}
.region-tabs .region-tab .flag {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, .2);
}
.region-tabs .flag.flag_vietnam   { background-image: url('/assets/images/country/flag/flag_vietnam.png'); }
.region-tabs .flag.flag_myanmar   { background-image: url('/assets/images/country/flag/flag_myanmar.png'); }
.region-tabs .flag.flag_korea     { background-image: url('/assets/images/country/flag/flag_korea.png'); }
.region-tabs .flag.flag_thailand  { background-image: url('/assets/images/country/flag/flag_thailand.png'); }
.region-tabs .flag.flag_hongkong  { background-image: url('/assets/images/country/flag/flag_hongkong.png'); }
.region-tabs .flag.flag_singapore { background-image: url('/assets/images/country/flag/flag_singapore.png'); }
.region-tabs .flag.flag_japan     { background-image: url('/assets/images/country/flag/flag_japan.png'); }
.region-tabs .flag.flag_taiwan    { background-image: url('/assets/images/country/flag/flag_taiwan.png'); }

/* --- 모집 중인 도시 한 줄 --- */
.city-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px var(--region-nav-x) 0;
    padding: 12px 18px;
    background: #fafafc;
    border: 1px solid #f0f0f3;
    border-radius: 14px;
    word-break: keep-all;
}
.city-chips .cc-label { font-weight: 700; font-size: 14px; color: #111; margin-right: 4px; white-space: nowrap; }
.city-chips a.cc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #e6e6ea;
    border-radius: 40px;
    background: #fff;
    font-size: 13.5px;
    color: #222;
    text-decoration: none;
    line-height: 1;
}
.city-chips a.cc b { font-weight: 600; color: var(--primary, #fa5a7d); font-size: 12.5px; }
.city-chips a.cc.off { color: #aaa; border-color: #eee; background: #fcfcfc; }
.city-chips a.cc.off b { color: #bbb; }
.city-chips a.cc.on, .city-chips a.cc:hover { border-color: var(--primary, #fa5a7d); color: var(--primary, #fa5a7d); }
.city-chips .cc-all { margin-left: auto; font-size: 13px; color: #666; text-decoration: none; white-space: nowrap; }

/* 홈: 배너 아래 섹션으로. 좌우는 홈 섹션 제목(.section-title padding 0 50px)과 맞춘다 */
.region-nav-section { padding: 4px 0 6px; background: var(--bg-white, #fff); }
.region-nav-section .region-nav { --region-nav-x: 50px; }

@media (max-width: 767px) {
    /* 휴대폰: 좌우 여백과 탭 세로 패딩을 줄여 첫 화면에 카드가 보이게 */
    .region-tabs { gap: 20px; }
    .region-tabs .region-tab { padding: 12px 0; font-size: 14px; }
    .city-chips { margin-top: 8px; padding: 12px; border-radius: 12px; }
    .city-chips .cc-label { width: 100%; margin: 0 0 2px; }
    .city-chips a.cc { padding: 7px 11px; font-size: 13px; }
    .city-chips a.cc.cc-more { display: none; } /* 모집 중 많은 도시 8개까지만 */
}