/* ===== 회원가입안내 페이지 ===== */
/* support.css의 공용 클래스(.join-*)를 그대로 활용 */
@import url("support.css");

/* ── 히어로: 기본 intro-hero-bg 사용, 별도 오버라이드 없음 ── */

/* ── 탭 ── */
.mem-tabs {
    display: flex;
    width: 100%;
    border-bottom: 2px solid #e1e1e1;
    margin-bottom: 48px;
}

.mem-tab {
    flex: 0 0 auto;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    letter-spacing: -0.02em;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.mem-tab:hover {
    color: #444;
}

.mem-tab.active {
    color: var(--main, #0d132d);
    border-bottom-color: var(--main, #0d132d);
    font-weight: 600;
}

/* ── 패널 ── */
.mem-panel {
    width: 100%;
}

.mem-panel[hidden] {
    display: none;
}

/* ── 모바일 ── */
@media (max-width: 768px) {
    .mem-tabs {
        margin-bottom: 32px;
    }

    .mem-tab {
        flex: 1;
        padding: 12px 16px;
        font-size: 14px;
        text-align: center;
    }
}