/* ============================================================================
   아래쪽 길잡이(하단 네비게이션) — 리디자인 모양, 모든 화면(옛 화면 포함)

   마크업은 rd-bottomnav.js 가 footerDiv1.js 의 네 벌(footerDiv12 · footerLoginOn · footerDivSearch ·
   footerDivSearch2)을 같은 이름으로 다시 만든다. 둘 다 common/header.jsp 가 싣는다 —
   footerDiv1.js · common.css 의 옛 길잡이는 손대지 않았다.

   · 새 모양은 .bn 틀이 있을 때만 건다 — 몇몇 화면은 .bottom_navi 를 결제 단추 줄로 따로 쓴다
   · 틀(.bottom_navi)의 옛 그림자는 :has 로 되돌린다. :has 를 모르는 옛 웹뷰에서는 틀만 옛 그림자가 남는다
   · 높이는 옛 길잡이와 같은 56px(위 선은 그림자로 긋는다)
   ============================================================================ */

.bottom_navi:has(> .bn) {
    /* 폭은 양 끝에 붙여 잡는다 — 옛 common.css 의 width:100vw 는 iOS 웹뷰가 돌리거나 웹뷰 크기가 늦게 정해질 때
       예전 폭(세로 폭)을 들고 있어, 가로 화면에서 길잡이가 화면 일부만 차는 일이 가끔 있었다 */
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff !important;   /* 늘 흰 바탕 — 비치거나 흐리지 않는다(화면 CSS 가 무엇이든) */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* 위 선은 border 가 아니라 그림자로 긋는다 — 높이를 옛 길잡이와 같은 56px 로 둔다(본문 아래 여백 56px 과 맞다) */
    box-shadow: 0 -1px 0 var(--c-border), 0 -4px 16px rgba(16, 22, 35, .06);
}

.bn {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 56px;
    background: #fff !important;   /* 틀(:has)을 모르는 웹뷰에서도 칸 자리는 흰색 */
}

.bn .bn-item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--c-text-sub2);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--t-base);
}
.bn .bn-item:active .bn-ic { transform: scale(.9); }
.bn .bn-item:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -4px; border-radius: var(--r-md); }

.bn .bn-ic {
    display: block;
    width: 22px;
    height: 22px;
    transition: transform var(--t-fast);
}
.bn .bn-lb {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: inherit;
}

/* 지금 화면 칸 : 파랑 + 굵게 + 위에 짧은 막대 */
.bn .bn-item.on { position: relative; color: var(--c-brand); }
.bn .bn-item.on .bn-lb { font-weight: 700; }
.bn .bn-item.on:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 44px;
    height: 3px;
    margin-left: -22px;
    border-radius: 0 0 3px 3px;
    background: var(--c-brand);
}

/* 태블릿(아이패드) — 아래 안전영역을 빈 띠로 두지 않고 칸 안에 넣는다
   아이패드 사파리는 주소창이 위에 있어 안전영역(20px 안팎, 창 모드면 더 크다)이 길잡이 밑에
   흰 띠로 고스란히 드러난다. 길잡이 전체 높이(56px + 안전영역)는 그대로 두고 칸만 그만큼 늘려
   아이콘 · 글자를 가운데로 내린다 — 화면마다 calc(56px + env(...)) 로 올려 둔 구매바 · 맨 위로
   단추 · 본문 아래 여백은 손대지 않아도 맞는다.
   폰 가로(높이 430px 안팎)는 높이 조건으로 빠진다 */
@media (min-width: 744px) and (min-height: 600px) {
    .bottom_navi:has(> .bn) { padding-bottom: 0; }
    .bottom_navi > .bn,
    .bottom_navi > .bn .bn-item { height: calc(56px + env(safe-area-inset-bottom)); }
}