@charset "utf-8";

/* style.css */
:root {
    --tg-color-primary: #3390ec;
    --tg-color-primary-dark: #2a79c6;
    --tg-color-primary-light: #e6f3ff;
    --tg-color-bg: #f5f7FA;
    --tg-color-white: #ffffff;
    --tg-color-text-title: #1f2937;
    --tg-color-text-body: #4b5563;
    --tg-color-border: #e2e8f0;
    --tg-color-accent: #f59e0b;
    /* 주황색 계열 (경고, 강조) */
    --tg-color-danger: #ef4444;
    /* 빨강 계열 (매우 중요) */

    --tg-border-radius: 12px;
    --tg-transition: all 0.3s ease;
}

/* 최상위 래퍼 설정 */
.tg-2fa-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--tg-color-text-body);
    background-color: var(--tg-color-bg);
    box-sizing: border-box;
    line-height: 1.6;
    overflow: hidden;
    /* 요소가 래퍼 밖으로 나가는 것을 방지 */
    /* 모바일 기본 패딩 (헤더 외곽 여백 포함) */
    padding-bottom: 40px;
}

/* 래퍼 내 전역 리셋 (기존 스타일 오염 및 덮어쓰기 방지) */
.tg-2fa-wrapper *,
.tg-2fa-wrapper *::before,
.tg-2fa-wrapper *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

.tg-2fa-wrapper b,
.tg-2fa-wrapper strong {
    font-weight: 700;
    color: var(--tg-color-text-title);
}

.tg-2fa-wrapper a {
    color: var(--tg-color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--tg-transition);
}

.tg-2fa-wrapper a:hover {
    color: var(--tg-color-primary-dark);
    text-decoration: underline;
}

.tg-2fa-wrapper mark {
    background-color: rgba(51, 144, 236, 0.15);
    color: var(--tg-color-primary-dark);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

/* 헤더 영역 */
.tg-2fa-header {
    background: linear-gradient(135deg, #2b84d9 0%, #1e62a8 100%);
    color: var(--tg-color-white);
    padding: 50px 20px;
    text-align: center;
    border-radius: 0 0 calc(var(--tg-border-radius) * 2) calc(var(--tg-border-radius) * 2);
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(43, 132, 217, 0.15);
}

.tg-2fa-header__badge {
    display: inline-block;
    background-color: var(--tg-color-danger);
    color: var(--tg-color-white);
    font-size: 13px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.tg-2fa-header__title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 12px;
    color: var(--tg-color-white);
}

.tg-2fa-header__desc {
    font-size: 15px;
	color: #fff;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* 본문 메인 래퍼 */
.tg-2fa-main {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 도입부 섹션 */
.tg-2fa-intro {
    background-color: var(--tg-color-white);
    padding: 24px;
    border-radius: var(--tg-border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.tg-2fa-intro__content p {
    margin-bottom: 16px;
    font-size: 16px;
}

.tg-2fa-intro__content p:last-child {
    margin-bottom: 0;
}

/* 아티클 공통 스타일 */
.tg-2fa-article {
    background-color: var(--tg-color-white);
    padding: 30px 24px;
    border-radius: var(--tg-border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.tg-2fa-article--mb {
    margin-bottom: 0px;
    /* gap으로 조절 중 */
}

.tg-2fa-article__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--tg-color-text-title);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--tg-color-primary-light);
}

.tg-2fa-article__desc {
    font-size: 16px;
    margin-bottom: 24px;
}

/* 하이라이트 박스 (직장인 필수 이유 등) */
.tg-2fa-highlight {
    background-color: rgba(245, 158, 11, 0.08);
    border-left: 4px solid var(--tg-color-accent);
    padding: 20px;
    border-radius: 0 8px 8px 0;
}

.tg-2fa-highlight__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tg-color-text-title);
    margin-bottom: 8px;
}

.tg-2fa-highlight__text {
    font-size: 15px;
}

/* 스텝별 진행 컨테이너 */
.tg-2fa-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 개별 스텝 묶음 */
.tg-2fa-step {
    background-color: var(--tg-color-bg);
    border: 1px solid var(--tg-color-border);
    border-radius: 8px;
    padding: 20px;
}

.tg-2fa-step__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.tg-2fa-step__badge {
    background-color: var(--tg-color-primary);
    color: var(--tg-color-white);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.tg-2fa-step__badge--warning {
    background-color: var(--tg-color-danger);
}

.tg-2fa-step__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--tg-color-text-title);
}

.tg-2fa-step__desc {
    font-size: 14px;
    color: var(--tg-color-danger);
    font-weight: 600;
    margin-bottom: 16px;
}

/* 숫자 리스트 스타일 */
.tg-2fa-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-2fa-list__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    background-color: var(--tg-color-white);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tg-2fa-list__num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: var(--tg-color-primary-light);
    color: var(--tg-color-primary-dark);
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-top: 2px;
}

/* 보너스 꿀팁 사이드 어사이드 */
.tg-2fa-tip {
    background-color: #f0fdf4;
    /* 연한 잔디/민트빛 (안정감) */
    border: 1px solid #bbf7d0;
    padding: 30px 24px;
    border-radius: var(--tg-border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.tg-2fa-tip__title {
    font-size: 18px;
    font-weight: 800;
    color: #166534;
    margin-bottom: 12px;
}

.tg-2fa-tip__desc {
    font-size: 15px;
    color: #15803d;
    margin-bottom: 16px;
}

.tg-2fa-tip__box {
    background-color: var(--tg-color-white);
    padding: 16px;
    border-radius: 8px;
    font-size: 15px;
}

.tg-2fa-tip__box p {
    margin-bottom: 8px;
}

.tg-2fa-tip__box p:last-child {
    margin-bottom: 0;
}

/* 결론 및 요약 (Summary) */
.tg-2fa-summary {
    background-color: var(--tg-color-text-title);
    color: var(--tg-color-white);
    padding: 40px 24px;
    border-radius: var(--tg-border-radius);
    text-align: center;
}

.tg-2fa-summary__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--tg-color-white);
    margin-bottom: 20px;
}

.tg-2fa-summary p {
    font-size: 16px;
    margin-bottom: 16px;
    color: #f3f4f6;
}

.tg-2fa-summary mark {
    background-color: var(--tg-color-accent);
    color: var(--tg-color-white);
}

.tg-2fa-summary__footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
    color: #d1d5db;
}

.tg-2fa-summary strong,
.tg-2fa-summary__footer a {
    color: var(--tg-color-white);
}

/* 반응형 모바일 최적화 및 태블릿/데스크톱 대응 (1100px 와이드 지원) */
@media (min-width: 768px) {
    .tg-2fa-header {
        padding: 70px 40px;
    }

    .tg-2fa-header__title {
        font-size: 32px;
    }

    .tg-2fa-header__desc {
        font-size: 17px;
    }

    .tg-2fa-main {
        padding: 0 40px;
    }

    .tg-2fa-article {
        padding: 40px;
    }

    .tg-2fa-article__title {
        font-size: 24px;
    }

    /* 스텝별 영역을 그리드로 변환 */
    .tg-2fa-steps {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* 3단계(중요) 과정은 그리드에서 2칸을 모두 차지하도록 구성 */
    .tg-2fa-step:nth-child(3) {
        grid-column: 1 / -1;
    }

    /* 3단계 리스트 항목을 2단 그리드로 나눔 (태블릿 이상) */
    .tg-2fa-step:nth-child(3) .tg-2fa-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .tg-2fa-tip {
        padding: 40px;
    }

    .tg-2fa-summary {
        padding: 50px 40px;
    }
}

@media (min-width: 1024px) {
    .tg-2fa-header {
        margin-bottom: 50px;
    }

    .tg-2fa-header__title {
        font-size: 38px;
    }

    .tg-2fa-main {
        gap: 40px;
    }
}

/* JS 애니메이션을 위한 유틸리티 클래스 */
.tg-fadeInUp {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.tg-fadeInUp.is-visible {
    opacity: 1;
    transform: translateY(0);
}