/* 푸터 — 사이트맵형.

   왜 :
   - 맨 아래까지 내려온 사람이 다음에 갈 곳을 찾는 자리인데, 로고 한 줄과
     약관 링크 넷뿐이라 갈 곳을 알려 주지 않았다.
   - 흰 바탕 + #3a3a3a 짧은 띠 하나라 본문과 푸터의 경계가 흐렸다.
   - 고객센터 안내 띠(.footer_top)는 브랜드 열로 옮겨 담았다(마크업에서 제거).

   무엇 : GNB 를 한 번 더 펼쳐 열별로 늘어놓고, 바탕을 잉크로 내린다.
          문구·링크·사업자정보·SNS 는 기존 푸터 그대로.
   되돌리기 : _Layout.cshtml 의 링크 한 줄과 이 파일, 그리고 footer_m 마크업. */

#footer .footer_m {
    padding: clamp(56px, 7vw, 84px) 0 clamp(30px, 4vw, 44px);
    background: #12151c;
    color: #8a92a3;
}

    /* ── 열 배치 ─────────────────────────────────────────────── */
    #footer .footer_m .foot_map {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
        gap: 36px 28px;
        align-items: start;
    }

    #footer .footer_m .foot_brand h1 {
        margin: 0;
    }

    #footer .footer_m .foot_brand img {
        /* logo2.svg 는 밝은 바탕용 — 잉크 바탕에서는 흰색으로 눕힌다 */
        display: block;
        width: 218px;
        height: auto;
        filter: brightness(0) invert(1);
        opacity: .92;
    }

    #footer .footer_m .foot_slogan {
        margin: 18px 0 0;
        max-width: 30ch;
        font-size: 14px;
        line-height: 1.7;
        color: #8a92a3;
        word-break: keep-all;
    }

    #footer .footer_m .foot_call {
        margin-top: 24px;
    }

        #footer .footer_m .foot_call strong {
            display: block;
            font-size: 26px;
            font-weight: 700;
            color: #fff;
            letter-spacing: -.02em;
            font-variant-numeric: tabular-nums;
        }

        #footer .footer_m .foot_call span {
            display: block;
            margin-top: 8px;
            font-size: 13px;
            line-height: 1.7;
            color: #6f7686;
        }

    #footer .footer_m .foot_col h4 {
        margin: 0 0 16px;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        letter-spacing: -.2px;
    }

    #footer .footer_m .foot_col ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 10px;
    }

    #footer .footer_m .foot_col li {
        float: none;
        margin: 0;
    }

    #footer .footer_m .foot_col a {
        font-size: 14px;
        color: #8a92a3;
        transition: color .18s;
    }

        #footer .footer_m .foot_col a:hover {
            color: #fff;
        }

    /* ── 약관 줄 · 사업자정보 ──────────────────────────────────── */
    #footer .footer_m .foot_link {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        margin-top: clamp(44px, 5vw, 60px);
        padding-top: 26px;
        border-top: 1px solid #242832;
    }

        #footer .footer_m .foot_link:after {
            content: none;
        }

        #footer .footer_m .foot_link li {
            float: none;
            margin: 0;
        }

            #footer .footer_m .foot_link li a {
                font-size: 14px;
                font-weight: 500;
                color: #b8bfcc;
            }

            #footer .footer_m .foot_link li:hover a {
                color: #fff;
            }

    #footer .footer_m .foot_info {
        margin-top: 18px;
        font-size: 13px;
        line-height: 24px;
        color: #676e7d;
    }

/* ── 맨 아래 줄 ───────────────────────────────────────────────── */
#footer .footer_bottom {
    height: auto;
    padding: 18px 0;
    background: #0c0e13;
    border-top: 1px solid #1b1f28;
}

    #footer .footer_bottom .inwrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    #footer .footer_bottom .copyright {
        line-height: 1.6;
        text-align: left;
        color: #676e7d;
    }

        #footer .footer_bottom .copyright > span {
            color: #b8bfcc;
        }

    #footer .footer_bottom .sns_area {
        position: static;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        #footer .footer_bottom .sns_area:after {
            content: none;
        }

        #footer .footer_bottom .sns_area li {
            float: none;
            margin: 0;
        }

            /* 이 아이콘은 원래 어두운 띠(#3a3a3a)용으로 그려진 옅은 회색 글립이다.
               흰색으로 눕히면 획이 뭉개져 동그라미만 남는다 — 그대로 두고 투명도만. */
            #footer .footer_bottom .sns_area li img {
                opacity: .6;
                transition: opacity .18s;
            }

            #footer .footer_bottom .sns_area li:hover img {
                opacity: 1;
            }

    /* 개인정보처리방침은 다른 약관과 구분해 두는 관행(공통 CSS)이라 색을 살리되,
       잉크 바탕에서 읽히도록 한 단계 밝힌다 */
    #footer .footer_m .foot_link li a[href*="privacy"] {
        color: #5cb8f7;
    }

/* ── 좁은 화면 ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    #footer .footer_m .foot_map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 24px;
    }

        #footer .footer_m .foot_map .foot_brand {
            grid-column: 1 / -1;
        }
}

@media (max-width: 560px) {
    /* 링크 스물일곱 개를 한 줄로 세우면 푸터만 1,500px 가 넘는다.
       이름이 짧아 두 칸으로도 다 들어간다. */
    #footer .footer_m .foot_map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 18px;
    }

        #footer .footer_m .foot_col a {
            font-size: 13px;
        }

    #footer .footer_m .foot_brand img {
        width: 180px;
    }

    #footer .footer_bottom .inwrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ── 좁은 화면에서 header-responsive.css 가 들고 오는 흰 바탕 시절 값 되돌리기 ──
   그 파일은 푸터가 흰 바탕이던 때 쓰였다. 링크 색은 잉크(#0b1220)라
   잉크 바탕에서 사라지고, .foot_info 위 실선은 밝은 회색이라 튄다.
   또 약관 줄이 이미 실선을 긋고 있어 두 줄이 겹쳐 보인다. */
@media (max-width: 768px) {
    #footer .footer_m .inwrap {
        gap: 0;
    }

    #footer .footer_m .foot_link {
        flex-wrap: wrap;
        gap: 10px 18px;
        margin-top: 36px;
        padding-top: 22px;
        border-top: 1px solid #242832;
    }

        #footer .footer_m .foot_link li a {
            font-size: 13px;
            color: #b8bfcc;
        }

        #footer .footer_m .foot_link li a[href*="privacy"] {
            color: #5cb8f7;
        }

    #footer .footer_m .foot_info {
        margin-top: 16px;
        padding-top: 0;
        border-top: 0;
        color: #676e7d;
    }
}

/* ── 외부 링크 표시 ──────────────────────────────────────────────
   새 창으로 사이트 밖에 나가는 글자 링크(매뉴얼 · 포트폴리오 · 패밀리사이트 · 회사소개 ·
   개인정보처리방침) 뒤에 작은 '밖으로' 아이콘. 마스크라 글자색(호버 흰색 포함)을 따라간다.
   SNS 는 이미 아이콘 이미지라 제외한다. */
#footer .footer_m :is(.foot_col, .foot_link) a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: .78em;
    height: .78em;
    margin-left: 4px;
    vertical-align: -.02em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .8;
}

/* ── 푸터 길이 줄이기 (2026-09-29) ───────────────────────────────
   실측(광고대행 화면, 푸터 전체): 1440 632px(0.7화면) / 1024 1,133px(1.5화면) /
   768 1,138px / 390 1,197px(1.4화면). PC 는 두고 좁은 폭만 줄인다. 링크 · 문구는 그대로.

   태블릿(769~1024) : 링크 네 묶음이 모바일처럼 두 칸 두 줄로 접혀 있었다. 이 폭이면
                     한 줄 네 칸이 들어간다. 브랜드 열은 위 한 줄에 가로로 편다
                     (로고 · 소개 왼쪽, 전화 오른쪽).
   모바일(~768)     : 두 칸 두 줄이면 한 줄 높이가 긴 묶음(광고대행 9개)을 따라가서
                     옆 칸(광고솔루션 5개)이 비었다. 짧은 두 묶음(광고솔루션 · 고객지원)을
                     한 줄에, 광고대행은 전체 폭 세 칸으로, 패밀리사이트는 옆으로 흐르는
                     한 줄로 둔다. 저작권 · SNS 도 위아래가 아니라 한 줄. */
@media (min-width: 769px) and (max-width: 1024px) {
    #footer .footer_m .foot_map {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 36px 24px;
    }

        #footer .footer_m .foot_map .foot_brand {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas: "logo call" "slogan call";
            column-gap: 32px;
            padding-bottom: 32px;
            border-bottom: 1px solid #242832;
        }

            /* 자식이 셋(로고 · 소개 · 전화)이라 이름을 안 주면 두 칸에 차례로 흩어진다
               (1024 실측: 소개가 오른쪽 위, 전화가 가운데). */
            #footer .footer_m .foot_brand h1 { grid-area: logo; }
            #footer .footer_m .foot_brand .foot_slogan { grid-area: slogan; }

            #footer .footer_m .foot_brand .foot_call {
                grid-area: call;
                align-self: end;
                margin-top: 0;
                text-align: right;
            }

        /* 광고대행(9개)이 줄 높이를 정했다(255px, 나머지 151~177). 두 칸으로 나눈다. */
        #footer .footer_m .foot_map > .foot_col:nth-of-type(2) ul {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 16px;
        }
}

/* 맨 아래 줄 — header-responsive.css 가 1024 이하에서 저작권 · SNS 를 세로로 쌓고
   안쪽 위아래에 16px 을 더 줬다(1024 실측 99px). 한 줄로 두고 위아래 여백은 띠가 갖는다. */
@media (max-width: 1024px) {
    #footer .footer_bottom {
        padding: 14px 0;
    }

        #footer .footer_bottom .inwrap {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-top: 0;
            padding-bottom: 0;
        }

        #footer .footer_bottom .sns_area {
            flex: none;
            gap: 4px;
        }
}

@media (max-width: 768px) {
    #footer .footer_m {
        padding: 44px 0 28px;
    }

        #footer .footer_m .foot_map {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 28px 18px;
        }

        #footer .footer_m .foot_slogan {
            margin-top: 14px;
        }

        #footer .footer_m .foot_call {
            margin-top: 18px;
        }

            #footer .footer_m .foot_call strong {
                font-size: 24px;
            }

        #footer .footer_m .foot_col h4 {
            margin-bottom: 12px;
            font-size: 14px;
        }

        #footer .footer_m .foot_col ul {
            gap: 8px;
        }

        #footer .footer_m .foot_col a {
            font-size: 13px;
        }

        /* 차례: 브랜드 / 광고솔루션 · 고객지원 / 광고대행(전체 폭) / 패밀리사이트(전체 폭) */
        #footer .footer_m .foot_map > .foot_col:nth-of-type(1) { order: 1; }
        #footer .footer_m .foot_map > .foot_col:nth-of-type(3) { order: 2; }

        #footer .footer_m .foot_map > .foot_col:nth-of-type(2) {
            order: 3;
            grid-column: 1 / -1;
        }

            #footer .footer_m .foot_map > .foot_col:nth-of-type(2) ul {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px 18px;
            }

        #footer .footer_m .foot_map > .foot_col:nth-of-type(4) {
            order: 4;
            grid-column: 1 / -1;
        }

            #footer .footer_m .foot_map > .foot_col:nth-of-type(4) ul {
                display: flex;
                flex-wrap: wrap;
                gap: 8px 18px;
            }

        #footer .footer_m .foot_link {
            margin-top: 30px;
            padding-top: 20px;
        }

    /* 사업자정보 여섯 줄 — 24px 줄 간격이라 144px 였다 */
    #footer .footer_m .foot_info {
        font-size: 12px;
        line-height: 1.65;
    }

    #footer .footer_bottom .copyright {
        font-size: 12px;
    }
}