/* ==========================================================================
   떠 있는 유리 캡슐 탭바 (iOS 26 Liquid Glass)

   Figma: iOS 26 (Liquid Glass Navigation) (Community)
          fileKey 5Bj6sjXQhfzlv196WpglzG / 5탭 변형 220:41
   계획서: docs/superpowers/plans/2026-08-31-liquid-glass-tabbar.md

   Figma 토큰 -> 여기서 쓴 값
     components/tabbar/background-color      #ffffff33  -> rgba(255,255,255,.45) (가독성 실측으로 상향)
     components/tabbar/border-radius         9999       -> 9999px
     components/tabbar/column-gap            -10        -> margin-right:-10px (CSS 는 음수 gap 불가)
     components/tabbar/tab/background-color-default  #ededed -> 활성 칩 배경
     components/tabbar/tab/icon-color-default        #000000 -> 비활성 아이콘
     system/label/tinted                     #007aff    -> #FE9B06 (브랜드 주황으로 치환)
     material/liquid-glass  DROP_SHADOW #0000001A 0 2 20 0 + GLASS radius 6

   Figma 와 의도적으로 다른 것
     - 활성 틴트: 앱 어디에도 파랑이 없어 하단만 이질적이다. 주황은 FAB·미션인증 배지와 짝이다
     - mix-blend-mode: plus-lighter 미사용: 어두운 배경에서 밝히는 기법이라
       크림색(#FFF6E6) 피드 위에서는 검정 아이콘이 날아간다
     - 폰트: SF Pro 대신 SUIT (main/style.css 가 !important 로 강제). 자간만 Figma 값
     - 아이콘 20px: Figma 는 17px SF Symbol. 24px 로 키웠더니 라벨이 눌려 잘려서 20px 로
     - 라벨 line-height 14px: Figma 는 13px(SF Pro 라틴). SUIT 한글은 잉크가 14px 이다
     - 배경 불투명도 45%: Figma 의 20% 는 사진 위에서 라벨이 WCAG AA 에 미달한다 (아래 실측)
     - saturate() 미사용: Figma 토큰에 없고, 넣으면 뒤 사진 색을 증폭해 탁해진다
   ========================================================================== */

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9;

    /* 유리 뒤가 보여야 하므로 배경을 두지 않는다 (기존 #FFFFFF 제거) */
    background: none;

    /* 캡슐 바깥(좌우 24px)의 투명 영역이 콘텐츠 클릭을 먹지 않게 한다.
       캡슐에서 auto 로 되돌린다. */
    pointer-events: none;

    /* 하단 거리는 --tabbar-gap 하나로 관리한다 (base/css/style.css 정의).
       안전영역 위에 24px 을 더하던 것을 걷어냈다 — 아이폰에서 58px 이라
       다른 앱보다 확연히 높이 떠 보였다. */
    padding: 16px 24px var(--tabbar-gap);
}

/* ---------------- 캡슐 ---------------- */
.footer_capsule {
    pointer-events: auto;

    /* .inner(632) 에서 좌우 24px 씩 뺀 폭. 데스크톱에서 가운데 정렬된다 */
    max-width: 584px;
    margin: 0 auto;
    padding: 4px;

    border-radius: 9999px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .1);

    /* Figma 는 20%(#ffffff33) 지만 그 값은 사진 위에서 라벨이 읽히지 않는다.
       피드 사진 6장 위에서 11px 라벨(#000)의 WCAG 대비를 실측한 결과:
         0.20 -> 최악 2.94   미달
         0.35 -> 최악 3.23   미달
         0.40 -> 최악 3.92   미달
         0.45 -> 최악 4.69   통과 (본문 기준 4.5)
       모든 표본에서 AA 를 넘기는 최소값이 0.45 라 이 값을 쓴다. */
    background: rgba(255, 255, 255, .45);

    /* saturate() 는 Figma 토큰에 없다. 넣어 보니 뒤 사진의 색을 증폭해
       탁해지고 대비도 떨어져서 쓰지 않는다. blur 반경 6 은 GLASS radius 6 그대로. */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    /* 스크롤 축소 (base/js.html 의 FooterMinimize 가 .is_minimized 를 토글한다)
       기준점은 캡슐 중앙이다 — 좌우·상하 모두 가운데로 모인다. */
    transform-origin: center center;
    transition: transform .28s ease-in;
    will-change: transform;
}

/* 아래로 스크롤 -> 75% 로 축소. 위로 스크롤하면 클래스가 빠져 원래대로 돌아온다.
   두 방향 모두 위 transition 의 ease-in 을 탄다. */
.footer_capsule.is_minimized {
    transform: scale(.75);
}

/* 모션 최소화를 켠 사용자에게는 크기 변화를 주지 않는다 */
@media (prefers-reduced-motion: reduce) {
    .footer_capsule {
        transition: none;
    }

    .footer_capsule.is_minimized {
        transform: none;
    }
}

/* backdrop-filter 를 지원하지 않으면 반투명 배경만 남아 뒤 사진이 그대로 비친다.
   폴백에서는 불투명에 가깝게 올려 글자를 지킨다. */
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
    .footer_capsule {
        background: rgba(255, 255, 255, .92);
    }
}

/* ---------------- 탭 배치 ---------------- */
.footer_list {
    display: flex;
    align-items: center;
}

.footer_list > li {
    flex: 1 0 0;
    min-width: 0;
}

/* Figma 의 column-gap:-10 (탭이 서로 겹친다). CSS gap 은 음수를 못 받는다 */
.footer_list > li:not(:last-child) {
    margin-right: -10px;
}

/* ---------------- 탭 1개 ---------------- */
.footer_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    height: 52px;
    max-width: 260px;
    padding: 8px;

    border-radius: 100px;
    overflow: hidden;
}

/* ---------------- 아이콘 ----------------
   background-image 가 아니라 mask-image 다. PNG 10개가 전부 단색이라
   알파만 마스크로 쓰고 색은 background-color 가 정한다.
   덕분에 활성/비활성 틴트를 자산 교체 없이 바꿀 수 있다. */
.footer_icon {
    /* 세로 예산: 탭 52 - 패딩 16 = 36 = 아이콘 20 + gap 2 + 라벨 14.
       이 합이 36 을 넘으면 flex 가 라벨을 눌러 글자 아래가 잘린다.
       (24px 로 뒀다가 라벨이 10px 로 압축돼 받침이 3px 잘렸었다) */
    width: 20px;
    height: 20px;
    flex: 0 0 auto;

    background-color: #000;
    opacity: .5;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.footer_item.main .footer_icon {
    -webkit-mask-image: url("/static/app_www/base/img/icon_footer_main_default.png");
    mask-image: url("/static/app_www/base/img/icon_footer_main_default.png");
}

/* 2026-09-02 에 방패+클로버+발바닥 아이콘으로 교체했다 (그 전 톱니 방패를 대체).
   마스크는 알파만 쓰므로 원본의 초록 클로버·회색 방패 색은 남지 않는다.
   발바닥은 원본에서 알파 0 으로 뚫려 있어 마스크에서도 구멍으로 남는다 — 흰색으로
   칠해진 그림이었다면 클로버가 통째로 메워졌을 것이다. 교체 자산도 이 점을 지켜야 한다.
   다른 3개 탭과 같이 비활성 검정 50% / 활성 브랜드 주황으로 칠해진다.

   파일명을 바꿔서 넣었다. STATIC_URL 이 CDN 을 가리키고 해시 접미사가 없어
   (config/lib/common.py) 같은 이름으로 덮으면 CloudFront 가 옛 그림을 계속 준다.

   되돌리려면 이 두 줄을 icon_footer_mission_default.png 로 되돌리면 된다 (파일은 남겨 뒀다). */
.footer_item.mission .footer_icon {
    -webkit-mask-image: url("/static/app_www/base/img/icon_footer_mission_clover.png");
    mask-image: url("/static/app_www/base/img/icon_footer_mission_clover.png");
}

/* 랭킹 탭은 2026-09-02 에 뺐다 (미션 화면 안의 탭으로 흡수).
   아이콘 PNG 는 남겨 뒀으므로 되돌릴 때 이 규칙만 다시 넣으면 된다. */

.footer_item.program .footer_icon {
    /* '프로그램' -> '둘러보기' -> '활동' 개편에 맞춘 나침반 아이콘.
       마스크는 알파만 쓰므로 PNG 자산 없이 인라인 SVG 로 둔다. 색은 .footer_icon /
       .footer_item.active 가 정한다.
       링 두께 2.6 / 바늘 확대는 옆 탭 아이콘(채움 계열)과 무게를 맞춘 값이다. */
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMmExMCAxMCAwIDEgMSAwIDIwIDEwIDEwIDAgMCAxIDAtMjB6bTAgMi42YTcuNCA3LjQgMCAxIDAgMCAxNC44IDcuNCA3LjQgMCAwIDAgMC0xNC44eiIvPjxwYXRoIGQ9Ik0xNi44OCA3LjEyIDkuNTYgOS41NiA3LjEyIDE2Ljg4IDE0LjQ0IDE0LjQ0eiIvPjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMmExMCAxMCAwIDEgMSAwIDIwIDEwIDEwIDAgMCAxIDAtMjB6bTAgMi42YTcuNCA3LjQgMCAxIDAgMCAxNC44IDcuNCA3LjQgMCAwIDAgMC0xNC44eiIvPjxwYXRoIGQ9Ik0xNi44OCA3LjEyIDkuNTYgOS41NiA3LjEyIDE2Ljg4IDE0LjQ0IDE0LjQ0eiIvPjwvc3ZnPg==");
}

.footer_item.space .footer_icon {
    /* '공간' 탭 - 위치 핀. 나침반과 같은 방식으로 PNG 없이 인라인 SVG 마스크로 둔다. */
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMmE3LjUgNy41IDAgMCAxIDcuNSA3LjVjMCA1LjItNi4xIDExLjYtNi45IDEyLjRhLjg1Ljg1IDAgMCAxLTEuMiAwQzEwLjYgMjEuMSA0LjUgMTQuNyA0LjUgOS41QTcuNSA3LjUgMCAwIDEgMTIgMnptMCA0LjZhMi45IDIuOSAwIDEgMCAwIDUuOCAyLjkgMi45IDAgMCAwIDAtNS44eiIvPjwvc3ZnPg==");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMmE3LjUgNy41IDAgMCAxIDcuNSA3LjVjMCA1LjItNi4xIDExLjYtNi45IDEyLjRhLjg1Ljg1IDAgMCAxLTEuMiAwQzEwLjYgMjEuMSA0LjUgMTQuNyA0LjUgOS41QTcuNSA3LjUgMCAwIDEgMTIgMnptMCA0LjZhMi45IDIuOSAwIDEgMCAwIDUuOCAyLjkgMi45IDAgMCAwIDAtNS44eiIvPjwvc3ZnPg==");
}

.footer_item.my .footer_icon {
    -webkit-mask-image: url("/static/app_www/base/img/icon_footer_my_default.png");
    mask-image: url("/static/app_www/base/img/icon_footer_my_default.png");
}

/* 마이페이지 탭 - 대표 반려견 사진.
   사진은 알파 마스크로 칠할 수 없으므로 활성 표시를 틴트 대신 테두리 링으로 한다.
   크기는 .footer_icon 과 같은 20px 이다 (세로 예산 36 = 아이콘 20 + gap 2 + 라벨 14). */
.footer_avatar {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: #e5e5e5;
    opacity: .85;
}

.footer_item.active .footer_avatar {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--sub-color, #A36304);
}

/* ---------------- 라벨 ---------------- */
.footer_label {
    max-width: 100%;
    /* 눌리면 글자가 잘리므로 절대 줄어들지 않게 한다 */
    flex: 0 0 auto;
    font-size: 11px;
    /* Figma 는 13px 이지만 그건 SF Pro 라틴 기준이다. SUIT 한글은 받침 때문에
       11px 에서 잉크 높이가 14px 이라 13 으로는 아래가 잘린다. */
    line-height: 14px;
    letter-spacing: .06px;
    color: #000;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------- 활성 ---------------- */
.footer_item.active {
    background: #ededed;
}

.footer_item.active .footer_icon {
    background-color: var(--sub-color, #A36304);
    opacity: .9;
}

.footer_item.active .footer_label {
    color: var(--sub-color, #A36304);
    font-weight: 600;
}

/* tablet */
@media screen and (max-width: 1023px) {}

/* mobile */
@media screen and (max-width: 767px) {}