/* ============================================================================= */
/* Mobile (< 767px) */
/* ============================================================================= */

/* --------------- Typography --------------- */
.brand-name {
    font-size: var(--font-body2-size);
    font-weight: var(--font-body2-weight);
    line-height: var(--font-body2-line-height);
    letter-spacing: var(--font-body2-letter-spacing);
}

.footer-links a {
    font-size: var(--font-subtitle3-size);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--font-subtitle3-line-height);
    letter-spacing: var(--font-subtitle3-letter-spacing);
}

.footer-info p,
.footer-affiliate .affiliate-select,
.footer-affiliate .affiliate-link {
    font-size: var(--font-subtitle4-size);
    font-weight: var(--font-subtitle4-weight);
    line-height: var(--font-subtitle4-line-height);
    letter-spacing: var(--font-subtitle4-letter-spacing);
}

/* --------------- Layout --------------- */
.footer-container {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-15);
    width: 100%;
    /* border-top: 1px solid var(--color-line-gray); */
    background-color: var(--color-background-gray);
}

/* 그리드 (1열 배치) */
.footer-inner {
    width: 100%;
    padding: var(--spacing-8) var(--margin-mobile) var(--spacing-20) var(--margin-mobile);
    row-gap: var(--spacing-6);
    display: grid;
    grid-template-areas: 
        "links"
        "info"
        "logo"
        "select"
    ;
}

.footer-links { grid-area: links; }
.footer-logo { grid-area: logo; }
.footer-info { grid-area: info; }
.affiliate-select { grid-area: select; }

/* --------------- 링크 --------------- */
.footer-links {
    /* border-bottom: 1px solid var(--color-line-gray); */
    /* padding-bottom: var(--spacing-4); */
}

.footer-links-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: var(--spacing-2);
    column-gap: var(--spacing-6);
    color: #5D5D5D;
}

/* --------------- 사이트 정보 --------------- */
.footer-info p {
    color: var(--color-text-gray);
    font-weight: 400;
    word-break: keep-all; /* 단어 단위로 줄바꿈 */
}

.footer-info p + p {
    margin-top: var(--spacing-2);
}

.footer-info .number-text,
.footer-info .contact-text {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

/* --------------- 로고 --------------- */
.footer-inner .logo-image {
    width: 6rem;
    height: auto;
}

/* --------------- 브랜드/계열사 --------------- */
.footer-affiliate {
    position: relative;
    display: flex; /* 자식 요소가 너비를 채우도록 flex로 설정 */
    width: 250px;
    padding: var(--spacing-3);
    border: 1px solid #A1A1A1;
    cursor: pointer;
}

.affiliate-select {
    color: var(--color-text-gray);
}

/* Custom Select Arrow */
.affiliate-select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--spacing-3);
    transform: translateY(-50%);
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    background-color: var(--color-text-gray);
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    mask-size: contain;
    pointer-events: none; /* 화살표가 클릭 이벤트를 방해하지 않도록 설정 */
}

/* 계열사/브랜드 드롭다운 옵션 패널 */
.affiliate-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);

    position: absolute;
    bottom: calc(100% + var(--spacing-2));
    left: 0;

    width: 60vw;
    min-width: 100%;
    max-height: 300px;
    overflow-y: auto;
    padding: var(--spacing-3);
    background-color: var(--color-white);
    border: 1px solid var(--color-line-gray);
    border-radius: var(--spacing-1);
    z-index: 10;
    cursor: default;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.affiliate-options.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.affiliate-options > li + li {
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-line-gray);
}

/* 계열사/브랜드 드롭다운 옵션 > 계열사/브랜드 */
.brand-group {
    display: flex;
    flex-direction: column;
}

.brand-name {
    display: block;
    margin-bottom: var(--spacing-1);
}

/* 계열사/브랜드 드롭다운 옵션 > 계열사/브랜드 > 링크 */
.affiliate-links-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--spacing-6);
}

.affiliate-links-list a {
    color: var(--color-text-gray);
}

/* ============================================================================= */
/* Tablet (>= 768px) */
/* ============================================================================= */
@media (min-width: 768px) {
    /* --------------- Layout --------------- */
    .footer-container {
        margin-top: var(--spacing-20);
    }

    /* 그리드 (2열 배치) */
    .footer-inner {
        padding: var(--spacing-8) var(--margin-tablet) var(--spacing-20) var(--margin-tablet);
        /* grid-template-columns: 1fr auto; */
        row-gap: var(--spacing-3);
        grid-template-areas: 
            "links logo"
            "info  select"
        ;
        justify-content: space-between;
    }

    .footer-links {
        align-self: start;
    }
    .footer-info {
        align-self: end;
    }
    .footer-logo {
        align-self: start;
    }
    .footer-affiliate {
        align-self: end;
    }

    /* --------------- 링크 --------------- */
    .footer-links {
        /* border-bottom: none; */
        /* padding-bottom: 0; */
    }

    .footer-links-list {
        flex-direction: row;
    }
    
    /* --------------- 사이트 정보 --------------- */
    .footer-info .number-text,
    .footer-info .contact-text {
        flex-direction: row;
        gap: 0;
    }

    .footer-info .number-text .curatorial-number::before,
    .footer-info .contact-text .email::before {
        content: "|";
        margin: 0 var(--spacing-2);
    }

    /* --------------- 로고 --------------- */
    .footer-logo {
        display: flex;
        justify-content: flex-end;
    }

    .footer-inner .logo-image {
        width: 8rem;
    }

    /* --------------- 브랜드/계열사 -------------- */
    /* 계열사/브랜드 드롭다운 옵션 패널 */
    .affiliate-options {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        bottom: calc(100% + var(--spacing-4));
        left: auto;
        right: 0;
        width: fit-content;
        min-width: 200px;
        max-width: 700px;
        max-height: 60vh;
    }

    .affiliate-options > li + li {
        padding-top: 0;
        border-top: none;
    }

    /* 계열사/브랜드 드롭다운 옵션 > 계열사/브랜드 */
    .brand-name {
        padding-bottom: var(--spacing-2);
        margin-bottom: var(--spacing-2);
        border-bottom: 1px solid var(--color-line-gray);
    }

    /* 계열사/브랜드 드롭다운 옵션 > 계열사/브랜드 > 링크 */
    .affiliate-links-list {
        flex-direction: column;
    }
}


/* ============================================================================= */
/* PC (>= 1280px) */
/* ============================================================================= */
@media (min-width: 1280px) {
    /* --------------- Typography --------------- */    
    .brand-name {
        font-size: var(--font-body1-size);
        font-weight: var(--font-body1-weight);
        line-height: var(--font-body1-line-height);
        letter-spacing: var(--font-body1-letter-spacing);
    }

    .footer-links a {
        font-size: var(--font-size-xs);
        font-weight: var(--font-body2-weight);
        line-height: var(--font-body2-line-height);
        letter-spacing: var(--font-body2-letter-spacing);
    }

    .footer-info p {
        font-size: 15px;
        font-weight: var(--font-subtitle3-weight);
        line-height: var(--font-subtitle3-line-height);
        letter-spacing: var(--font-subtitle3-letter-spacing);
    }

    .footer-affiliate .affiliate-select,
    .footer-affiliate .affiliate-link {
        font-size: var(--font-subtitle3-size);
        font-weight: var(--font-subtitle3-weight);
        line-height: var(--font-subtitle3-line-height);
        letter-spacing: var(--font-subtitle3-letter-spacing);
    }

    /* --------------- Layout --------------- */
    .footer-container {
        margin-top: var(--spacing-30);
        background-color: var(--color-background-gray);
    }

    .footer-inner {
        width: var(--layout-width-max);
        padding: var(--spacing-8) 0 var(--spacing-20) 0;
    }

    /* --------------- 링크 --------------- */
    .footer-links-list {
        column-gap: var(--spacing-8);
    }

    /* .footer-links a {
        font-weight: 700;
    } */

    /* --------------- 사이트 정보 --------------- */
    .footer-info p {
        font-weight: 400;
    }

    /* --------------- 로고 --------------- */

    /* --------------- 브랜드/계열사 --------------- */
    /* 계열사/브랜드 드롭다운 옵션 패널 */

    /* 계열사/브랜드 드롭다운 옵션 > 계열사/브랜드 */

    /* 계열사/브랜드 드롭다운 옵션 > 계열사/브랜드 > 링크 */
    .affiliate-links-list {
        row-gap: var(--spacing-1);
    }
}