/**
 * ITF Korea — ITF 소개/연혁
 * Figma 6040:7971 PC · 6146:3648 Tablet · 6140:3269 Mobile
 */

.itf-site .itf-intro-sect {
    padding: var(--subContM) 0 var(--subContPd);
    background: #fff;
}

/* .in2 / __block gap → site-page-rhythm */
.itf-site .itf-intro-sect > .in2 {
    display: flex;
    flex-direction: column;
}

.itf-site .itf-intro-sect__block {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.itf-site .itf-intro-sect__tit {
    margin: 0;
    font-size: var(--mainH2);
    font-weight: 700;
    line-height: var(--titLine);
    color: #000;
}

.itf-site .itf-intro-sect__copy {
    margin: 0;
    width: 100%;
    font-size: var(--txt);
    font-weight: 400;
    line-height: var(--txtLine);
    color: var(--txtGray1);
}

.itf-site .itf-intro-sect__copy p {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.itf-site .itf-intro-sect__copy-gap {
    display: block;
    height: calc(var(--txt) * var(--txtLine));
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
}

.itf-site .itf-intro-sect__history {
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 100%;
}

.itf-site .itf-intro-sect__history-head {
    display: flex;
    align-items: center;
    width: 100%;
}

.itf-site .itf-intro-sect__history-title {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.itf-site .itf-intro-sect__logo {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    overflow: hidden;
}

.itf-site .itf-intro-sect__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PC: History sticky 카드 | 세로 연혁 */
.itf-site .itf-intro-sect__body {
    display: flex;
    align-items: flex-start;
    gap: 160px; /* Figma 120 + 40 */
    width: 100%;
}

.itf-site .itf-intro-sect__aside {
    flex-shrink: 0;
    width: 360px;
    position: sticky;
    top: calc(var(--hdH) + var(--adminBarH) + 2rem);
    align-self: flex-start;
}

.itf-site .itf-intro-sect__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    width: 360px; /* 400×280 비율 유지 · 약간 축소 */
    height: 252px;
    padding: 36px;
    border-radius: var(--radius);
    overflow: hidden;
    color: #fff;
    background: #111;
}

.itf-site .itf-intro-sect__card-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.itf-site .itf-intro-sect__card-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.itf-site .itf-intro-sect__card-tit {
    margin: 0;
    font-size: var(--mainH3);
    font-weight: 700;
    line-height: var(--titLine);
    color: #fff;
    text-align: left;
}

.itf-site .itf-intro-sect__card-desc {
    margin: 0;
    font-size: var(--txt);
    font-weight: 400;
    line-height: var(--txtLine);
    color: #fff;
    text-align: left;
}

.itf-site .itf-intro-sect__timeline {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.itf-site .itf-intro-sect__col {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.itf-site .itf-intro-sect__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 8px 20px;
    border-radius: 8px;
    overflow: hidden;
    color: #fff;
    font-size: var(--txt);
    font-weight: 500;
    line-height: var(--txtLine);
    background: rgba(38, 66, 131, 0.8);
}

.itf-site .itf-intro-sect__badge-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 8px;
}

.itf-site .itf-intro-sect__badge-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.itf-site .itf-intro-sect__badge-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(38, 66, 131, 0.8);
}

.itf-site .itf-intro-sect__badge-txt {
    position: relative;
    z-index: 1;
}

.itf-site .itf-intro-sect__events {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.1));
}

.itf-site .itf-intro-sect__event {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    width: 100%;
}

.itf-site .itf-intro-sect__year {
    flex-shrink: 0;
    font-size: var(--txt);
    font-weight: 400;
    line-height: var(--txtLine);
    color: #000;
    white-space: nowrap;
}

.itf-site .itf-intro-sect__event-txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--txt);
    font-weight: 400;
    line-height: var(--txtLine);
    color: var(--txtGray1);
}

.itf-site .page-sub--itf-intro .page-sub__body,
.itf-site .page-sub--itf-korea-intro .page-sub__body {
    padding: 0;
    max-width: none;
}

/* Tablet — Figma 6146:3648 */
@media screen and (max-width: 1024px) {
    .itf-site .itf-intro-sect__history {
        gap: 40px;
    }

    .itf-site .itf-intro-sect__body {
        gap: 60px;
    }

    .itf-site .itf-intro-sect__aside {
        width: 309px;
    }

    .itf-site .itf-intro-sect__card {
        width: 309px; /* 343×240 비율 유지 · PC와 동일 축소 */
        height: 216px;
        padding: 28px;
        border-radius: 14px;
    }

    .itf-site .itf-intro-sect__timeline {
        gap: 100px;
    }
}

/* Mobile — Figma 6140:3269 · History 카드 없음 */
@media screen and (max-width: 768px) {
    .itf-site .itf-intro-sect__history {
        gap: 28px;
    }

    .itf-site .itf-intro-sect__body {
        flex-direction: column;
        gap: 0;
    }

    .itf-site .itf-intro-sect__aside {
        display: none;
    }

    .itf-site .itf-intro-sect__timeline {
        gap: 80px;
        width: 100%;
    }

    .itf-site .itf-intro-sect__col {
        gap: 24px;
    }

    .itf-site .itf-intro-sect__events {
        gap: 20px;
    }
}